New Component: st-card for displaying KPI metrics in your apps

[Gengsu07]

Anyone know why st-card gone?
https://github.com/akshanshkmr/st_card
https://pypi.org/project/st-card/

[Don-Yin]

Hi akshanshkmr,

It looks like the st-card component is gone.
Are you planning to bring it back anytime soon?

Best,
Don

[akshanshkmr]

Yes @Don-Yin

I’m trying to get it back as soon as possible

Sorry for the delay

[kareemrasheed89]

hope this component is still working ???

[kareemrasheed89]

@akshanshkmr where is your st-card pls…

I need it

[akshanshkmr]

Hi @kareemrasheed89

Sorry for the inconvenience

If it was up to me i would never have taken the components down, i will get it back soon but can’t promise an ETA yet.

Hope you understand

Thanks
Akshansh

[Shawn_Pereira]

Hi @akshanshkmr , please get the component back up - it’s the best KPI metric component available for Streamlit right now. Your efforts are very much appreciated by a whole lot of Streamlit users, me included.

Cheers

[kareemrasheed89]

No issues.

I got it.

I will find a means

Rasheed Abdulkareem

(Bsc, MOS, MCP, NIMRA)

[akshanshkmr]

Thanks Shawn It means a lot

I’m sad too that i had to take it down,
For now I can just say I won’t keep you waiting too long

Thanks,
Akshansh

[kareemrasheed89]

Any update

[manoj_kumar]

This component was good…can you please let us know when can you make it available.

Thanks

[yeshwanth1312]

@akshanshkmr Do you have an ETA on this when you are going to bring it back ?

[Shawn_Pereira]

Hi @yeshwanth1312 , @manoj_kumar , @kareemrasheed89

Until @akshanshkmr can make his component again, you have the following alternatives:

1. Use CSS, markdown & columns as I have done at this link: Style Column Metrics like the Documentation

2. Use the info card which is part of the hydralit components. The link is: hydralit-components · PyPI

The 2nd one is a pain-free option.

Hope this helps,

Cheers

[Probability]

If there is enough interest, I was thinking of extending the info card into a full KPI card with animated charts and values etc. but only if enough people would find it useful, as I build these components for myself these days. For context, I’m the author of both the Hydralit and Hydralit Components packages.

[Shawn_Pereira]

Hi @Probability,

Firstly, thank you for the hydralit components. I used the horizontal option_bar in one of my projects and it looks very cool.

You may not know if your components garner interest - it is only when @akshanshkmr 's component went out of commission, that people sharted messaging him. I am sure there will be many who have not messaged.

Would love to have an good info_card - streamlit still needs to add some sorely-missed widgets.

Feedback on your hydralit components:

1. The current info_card is very nice. Suggestions: allow the user to add their own icons / images as not all needed icons are not available from bootstrap. Also, the custom info_card progress bar defaults to red - there is no option to change this.
2. Vertical Option_bar: Suggestion: the icons to come in a line, vertically, (like in the sidebar of a dashboard)
3. Progress bar: very good and fully customizable
4. Navbar: I would tend to go with the more traditional, plain navbar. But the functionality seems very nice.

Haven’t used Hydralit as yet - plan to check it out this weekend.

Suggestions for additional components / widgets:

1. Modal dialog boxes
2. On/off switch button
3. Half moon gauge dial (to be used like the info_card)

Thank you, once again

Cheers

[kareemrasheed89]

Thanks

Rasheed Abdulkareem

(Bsc, MOS, MCP, NIMRA)

[Probability]

Wow, just wow. Thank you @Shawn_Pereira your words are very much appreciated, this is solid feedback and some great detail I’m happy to have a look at.

A rough outline as to what i was looking at for a KPI card is to provide something similar to the info_card with the ability to add one or more mini charts and larger call out values. I like to work with modular components, hence the progress bar on the info card is just the progress bar component, I usually write the components as the need arises when working with clients.

I’ll have a look at adding custom icons/images in, however the info_card also fully supports all standard Font Awesome icons as well as the Bootstrap ones currently, that is a very big spread, almost 3,500 icons in total, so hopefully for now that will be enough.

The reason the progress bar color defaults to red is without providing any parameters to customise the color or sentiment, it will use the Streamlit primary color from the theme, try applying a custom theme and see what happens

The option bar vertical alignment one is a good one, as some people want everything centered and some want it aligned left/right, i’ll just add another parameter so the user can choose, should make everyone happy, hopefully

I would lastly add, since it is often not even known, there is an experimental module in this package that can already do some of the items the community discusses, such as the ability to patch in custom Javascript, and if you look at the example on the repo page, how to insert a custom modal popup form with two way communication.

This type of response is what I’ve been looking for, with the Hydralit Components package having over 18k downloads without much feedback. I’m always happy to have a look at what the community would like to see, as it is already the largest single 3rd party custom components library (by number of components within one package) for Streamlit and am happy to keep pushing forward with the right motivation.

Once again your informative feedback and encouragement are most appreciated

[Nour_Besbes]

Hello
Is it possible to add a two lines content ? in the info card