I want to build my first component

🧩 Custom Components
1

Dear community,

I really REALLY want to build graphs as shown below in streamlit (that can be made for instance from a dict). I am aware of the component API reference, but working with css and javascript is a bit of a jungle for me. Where is the right place to start if I wanna built such a thing myself? Any advice is highly appreciate

image
image1372×823 176 KB

2

Hey @lorenzweb! Great idea.

Here’s a recent and great tutorial made by @blackary: How to build your own Streamlit component - although it does involve some JS knowledge!

I would also ping @kmcgrady here because he has made a very similar component in the past!

2 Likes
3

Hey @lorenzweb !

I created a component like this that might be of help.

It’s not on pypi yet cause I haven’t perfected it. You can use the Wheel file though. Would love your feedback and maybe I can get this on PyPi.

Basic syntax

st_org_chart(chart_data=YOUR_INPUT, key=YOUR_KEY)

# where YOUR_INPUT is of the following format.
# [
#   {
#       'id': ID of person,
#       'parentId': ID of manager,
#       'emoji': emoji icon,
#       'imageUrl': url (should be square picture),
#       'profileUrl': URL to more details,
#       'primary': First line (usually name),
#       "secondary": Second line (like title)
#       "tertiary": Third line (whatever you like
#   } 
# ]

Each chart would look like this:

image
image924×578 45.1 KB

(note this is dark mode)

Hope that helps!

4 Likes
4

Thank you so much for replying! Looks promising. My use case would extend somewhat beyond org-chart with the ability to use the nodes as general containers (eg images/graphs, or even for an st.upload_file widget). Also make the tree stretch horizontally. :slight_smile:

Let me have a dive into it :slight_smile:

5

Awesome, highly appreciate the reply :slight_smile: