search

okld / streamlit-elements

Create a draggable and resizable dashboard in Streamlit, featuring Material UI widgets, Monaco editor (Visual Studio Code), Nivo charts, and more!
MIT License
679 stars 77 forks source link

Support for Nivo/Boxplot #31

Open LaurinHerbsthofer opened 10 months ago

LaurinHerbsthofer commented 10 months ago

I'm using streamlit-gallery (https://github.com/okld/streamlit-gallery) based on streamlit-elements and I successfully recreated the nivo radar and pie chart plots as shown in the draggable UI demo (which is fantastic) and I also expanded the functionality to include bump, areabump and chord plots.

However, I cannot get nivo/boxplot to work, presumably because boxplots were added rather recently to nivo (https://github.com/plouc/nivo/issues/849#issuecomment-1527258343).

What are necessary steps that I need to take to make nivo/boxplot useable in the draggable UI, just like radar and pie charts?

LaurinHerbsthofer commented 10 months ago

I got it working by modifying the streamlit-elements source code and building it manually using make, then integrating the built code into my streamlit-gallery python environment. If someone else needs to do this, here is what I did:

  1. I added BoxPlot: dynamic(() => import("@nivo/boxplot").then(m => m.ResponsiveBoxPlot), { loading: ElementsLoading, ssr: false }), to ./streamlit_elements/frontend/components/modules/charts/Nivo.tsx
  2. I added the "@nivo/boxplot": "^0.84.0" requirement to streamlit_elements/frontend/package.json
  3. I added __version__="0.1.0" to streamlit_elements/__init__.py to fix a problem with make
  4. make
  5. make build
  6. I copied the newly built streamlit_elements/streamlit_elements folder to my streamlit-gallery python environment

Now nivo boxplots works in streamlit-gallery just like all other plots by simply making a copy of streamlit_gallery/components/elements/dashbaord/bar.py to */boxplot.py and replacing the line nivo.Bar() with nivo.BoxPlot(). How to work with the associated demo data can be found here: https://nivo.rocks/boxplot/

However, it would be nice if the streamlit-elements repo could be updated to include these changes. I will make a pull request for that soon.