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

Custom Components
62

Hi @lkdd-ao , thanks for the great work, a newbie question, is there anyway to catch nivo chart click actions?

63

Based on my personal test results, currently testing radar charts is not possible. Callbacks can use the onClick parameter of nivo, which can return structures similar to {id:, value:, index:, date:}
For example, nivo. Bar

{
    id:             string | number,
    value:          number,
    formattedValue: string,
    index:          number,
    indexValue:     string | number,
    color:          string,
    // datum associated to the current index (raw data)
    data:           object
}
64

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

thanks

65

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

1 Like
66

No, unable to load plot into elements

67

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?

68

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'
        )
69

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?).

70

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'}  # 
        )
71

Wonderful.
Exactly what I wanted.

Thank you.

72

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?

73

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

2 Likes
74

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

76

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" ) ```
77

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

78

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.

79

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
80

is there an easy tutorial how to use this?

81

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

82

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