Ant Design Charts 底层的 G2，我做了一个库：streamlit-g2 .
1 Like
whats the main advantage of streamlit-g2 over other libs please.
1 Like
it is advantage of G2, not streamlit-g2.
Features
- Progressive Usage - The main objective of G2 is to help you get meaningful visualizations quickly with concise declarations and it infers the rest. But you can configure much more for complex and advanced situations.
- Declarative API - We employs a functional declarative API to specify chart options in a programmatic fashion, which contributes to better logic reuse and more flexible code organization.
- High Extensibility - To satisfy specific needs, G2 provides a convenient and consistent mechanism to extend everything you can imagine, whether a scale, a transform, a mark, etc,. You can even customize a brand new visualization tool based on this mechanism.
- Comprehensive Grammar - G2 rejects a chart typology in favor of marks, transforms, scales, coordinates, and compositions. In addition to static visual representations, it’s possible to declare data-driven animations and apply well-designed action-based interactions to plots as well.
- Powerful Renderer - There is a powerful renderer G under G2 to generate web-based visualizations using Canvas, SVG or WebGL. The plenty of plugins it has benefit G2 from rendering charts with novel styles such as hand-drawn and fully embracing the ecosystem of D3.
2 Likes
Can you provide a snippet of the code? I seem to remember that there was a problem, but the details are not clear.
Btw,you can try the latest version 0.2.5.
2 Likes
3 Likes
Hello,
Great components! Thanks so much.
I have a question: how to retrieve a second consecutive click on a same button? The on_change only triggers if the last button was different … Setting index to None only hides it … This makes the group working as a radio group instead of buttons.
Is there a way to extend this rather than destroy and create a different group every single time (which is uncomfortable for both user and coder)?
Thanks a lot
2 Likes
Hi @ji_haoran
I am planning to duplicate the numeric keypad of the keyboard in my app. I created a 4x3 button matrix which works fine for desktop or mobile in landscape mode using vanilla streamlit. However, for mobile portrait mode, the 4x3 matrix changes to 1 column (i.e.1x12) using normal streamlit columns (with/out dummy padding columns). Streamlit can’t align buttons to the left like your widgets can.
Next, I already tried using 3 rows of sac.buttons but I can’t nullify the previous button selection in the common callback, as there can be only 1 button selected in all 3 rows.
Is the 4 columns x 3 rows matrix of number buttons possible by using just 1 set of sac.buttons (for the mobile portrait mode)?
Cheers
1 Like
Hi all:
I want to check if it is possible to use the menu items build and if clicked, go to a page of a multi page app without rerunning and open the page in a new browser window?
At least that was the behaviour i saw when using the new site with href notation…
I was looking for switch_page() which is obviously not available here, since we don´t use the normal multi page approach.
all the best
1 Like
Hello, I’d like to use this sac menu as an alternative sidebar menu for a multipage script, similar to what’s shown in the demo page
I see this example code:
import streamlit_antd_components as sac
sac.menu([
sac.MenuItem('home', icon='house-fill', tag=[sac.Tag('Tag1', color='green'), sac.Tag('Tag2', 'red')]),
sac.MenuItem('products', icon='box-fill', children=[
sac.MenuItem('apple', icon='apple'),
sac.MenuItem('other', icon='git', description='other items', children=[
sac.MenuItem('google', icon='google', description='item description'),
sac.MenuItem('gitlab', icon='gitlab'),
sac.MenuItem('wechat', icon='wechat'),
]),
]),
sac.MenuItem('disabled', disabled=True),
sac.MenuItem(type='divider'),
sac.MenuItem('link', type='group', children=[
sac.MenuItem('antd-menu', icon='heart-fill', href='https://ant.design/components/menu#menu'),
sac.MenuItem('bootstrap-icon', icon='bootstrap-fill', href='https://icons.getbootstrap.com/'),
]),
], open_all=True)
But I can’t find a way to make it work as an alternative sidebar!
Could you please show us the code of the sidebar inside https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/ for example, or any another example of a working sidebar in order to use it as an alternative sidebar in a multipage?
1 Like
antd sac menu is designed for a single file. You can put them in the sidebar this way:
main_page.py
with st.sidebar:
menu_item = sac.menu([
sac.MenuItem('home', icon='house-fill', tag=[sac.Tag('Tag1', color='green'), sac.Tag('Tag2', 'red')]),
sac.MenuItem('products', icon='box-fill', children=[
sac.MenuItem('apple', icon='apple'),
sac.MenuItem('other', icon='git', description='other items', children=[
sac.MenuItem('google', icon='google', description='item description'),
sac.MenuItem('gitlab', icon='gitlab'),
sac.MenuItem('wechat', icon='wechat'),
]),
]),
sac.MenuItem('disabled', disabled=True),
sac.MenuItem(type='divider'),
sac.MenuItem('link', type='group', children=[
sac.MenuItem('antd-menu', icon='heart-fill', href='https://ant.design/components/menu#menu'),
sac.MenuItem('bootstrap-icon', icon='bootstrap-fill', href='https://icons.getbootstrap.com/'),
]),
], open_all=True)
Use the menu_item value to navigate in the main page.
Use the leaf/child and not the parent.
# python >= 3.10
match menu_item:
case 'apple':
st.write('apple page')
case 'google':
st.write('google page')
...
And to not mess up your existing pages display in the sidebar under pages folder for multi-page app, you can disable displaying them by modifying the config.toml.
.streamlit/config.toml
[client]
showSidebarNavigation = false
If you want to separate the pages by file, you can create a folder and put apple.py on it, where the contents of apple are all from apple.py. Create a folder named modules and some files such as apple.py, google.py, etc.
./modules/apple.py
import streamlit as st
def Apple():
st.title('Welcome to apple page!!')
And modify your main_page.py.
main_page.py
from modules.apple import Apple
with st.sidebar:
menu_item = sac.menu([ ...
...
match menu_item:
case 'apple':
Apple()
...
Or just use your existing pages/apple.py path.
from pages.apple import Apple
Or you can use the switch_page to navigate to the pages files.
match menu_item:
case 'apple':
st.switch_page('pages/apple.py')
However you will no longer see the sidebar menu because that sidebar menu is only shown for the main page.
Depending on your design you can explore different ways to show the sac menu, etc. I like the sac menu because of this multi-hierarchy and collapsibility.
1 Like
Just great! Now I can use this custom navigation bar… but I still can see the original (default) one above (see image), because I use a multipage… can I hide the default navigation bar?
1 Like
.streamlit/config.toml
[client]
showSidebarNavigation = false
Hi,
I have question about sac.menu.
I create menu which has many childrens.
I want to apply click event to upper menu(not children menu.)
For example, in your demo app, if I click products tab, I want to make event happens.
For now, upper menu only do menu slots open and close.
How can I set upper menu callable?
Hi @ji_haoran.
Let me start by congratulating you for creating this great component.
I’ve been using it to create my app. However, I’ve been struggling to change the color of the text in the sidebar, to be different from the main text color.
When I inspect the elements on my browser, I’m able to manually change the text to the color I want, but I’m struggling to edit it using the st.markdown command.
Would you be able to help me with that?
When implementing the sidebar menu as you suggested, I encountered an issue: when I select ‘Apple,’ for example, it redirects to the specified page, but instead of rendering the page alongside the sidebar, it opens as a standalone page without the sidebar. To maintain sidebar functionality, I either need to reload the page or include a back button. Do you have any suggestions for addressing this issue?
I make a sample application using antd. This is not a multipage app, but pages are organized a bit.
I tried to get the tree component working and return back my own Key/Id instead of just index which I cannot point back to original record.
Is there a way to do this?
hi people, no matter what i do i cannot seem to make a select all button for the cascader that will select visually all the options - in the backend it seems to work but not displayed on the cascader
import streamlit as st
import streamlit_antd_components as sac
key = 'cascader_test'
items = [sac.CasItem('Red'), sac.CasItem('Green'), sac.CasItem('Blue')]
if key not in st.session_state:
st.session_state[key] = []
if st.button("Select All", key="select_all_button"):
st.session_state[key] = [0, 1, 2]
default = st.session_state[key]
selection = sac.cascader(items=items, multiple=True, search=True, clear=True, strict=True, return_index=True, key=key, index=default)
st.write("Session state:", st.session_state[key])
st.write("Selection:", selection)
thanks in advance!
Same Problem here with the sac.cascader. @Nicolas5 have you found a solution?
The index parameter should select two CasItem (“Home” and “App”), but only 1 item is rendered (“Home /”).
(it seams the indices are interpreded as one CasItem identifier with the hierachical levels).
So how to pre-select “Home” and “App” at the same time?:
import streamlit_antd_components as sac
import streamlit as st
selected=sac.cascader(items=[
sac.CasItem('Home', icon='house'),
sac.CasItem('App', icon='house'),
sac.CasItem('Test', icon='house'),
], label='label', index=[0,1], multiple=True, return_index=True, key="CasTest")
st.write(selected)
any ideas? Seems like a bug in the cascader implementation of the index handling