Hey Plotly Community,
This is a curated list of all the components I’ve designed built and published. With the help of: GitHub - plotly/dash-component-boilerplate: Get started creating your own Dash components here. anyone can turn any react or javascript github project into a packaged re-usable dash component for the masses thanks to that repo! Honestly from my initial overview I was intimidated with the processes but after jumping into it completely, I can assure any inspired developer is a lot easier to make custom components then you would assume.
My javascript understanding is probably at a 3rd grade reading level but thanks to support from chatgpt and github copilot it doesn’t matter. Anyone with a small bit of effort can design develop and contribute a new package creating a better ecosystem with more components and options for the entire plotly community.
My advice is to find a worthy javascript project that you believe would be a good addition to plotly and dash.
create a new project in your favorite IDE.
pip install cookiecutter
cookiecutter gh:plotly/dash-component-boilerplate
After which you will mainly work within source/lib/components to structure the javascript. Then you’ll create / test the component through running usage.py which will act like a simple dash app.py.
Your two favorite commands are npm install _______ for retrieving the library for which you intend to use as you build out source/lib/components as you make changes to the project’s .react.js file, you will run npm run build after any changes to push the work you’ve made so its reflected in the usage.py
from that point just run usage.py, test the project go back to source/lib/components tweak, add features until you find yourself with a polished project before publishing it to https://pypi.org/.
I’d recommend typing in your favorite AI:
I’m looking to setup a new dash component based on GitHub - plotly/dash-component-boilerplate: Get started creating your own Dash components here., The component is based on _________________ (provide the full github readme.md or relevant context for the AI to understand.) Then trim the usage.py to remove output and the callback. Reference it next within the chat and then inform the AI of your source/lib/components/_______.react.js file and its layout. Most of the time you’ll be provided with a great starting format for you to continue to build and alter from. Then just ask new questions to resolve features you’d like to include or bugs you face in design. Typically takes a good handful of back and forth till you have a polished package but its a great tool to help you along the development process.
Now to highlight some of the components I’ve built, most of which took ~ day worth of time to design and publish.
-
Full Calendar Component
pip install full-calendar-componentThis component was designed to offer a full screen calendar to offer a range of capabilities for plotting events based on date and time. Included are a range of displays from calendar, week, day and list view. I’ve also designed a boilerplate code to offer and modal for creating new events with a rich text editor with a start and end date and time selector and a color option for the event.
You can learn more about it from its dedicated post: Pip install full-calendar-component - #10 by PipInstallPython -
Dash Summernote
pip install dash-summernoteThis project offers the only other rich text editor option other thanquillwith notable capabilities that the other cant offer. For example, multiple fonts, sizes and colors. Tables, video and a code view along with many other features. Learn more about it via checking out: Pip install dash-summernote -
Dash Emoji Mart
pip install dash-emoji-martThis component offers a range of emoji’s and the ability to create custom emoji’s that can be easily searched in used in different ways for a dash application. You can learn more about it here: Pip install dash-emoji-mart -
Dash Charty
pip install dash-chartyThis is a graphing library thats mostly complete, could use some help from other developers. However it offers a fancy way for viewing time / date focused charts. With multiple themes, on hover capabilities and filtering. Learn more:
Pip Install Dash-Charty -
Dash Image Gallery
pip install dash-image-galleryoffers an elegant image carousel thats mobile friendly with auto play, full screen and other features for pictures and video. You can find more about it here: Pip Install Dash-Image-Gallery -
Dash Swiper
pip install dash-swiperThis is a slider that offers 20 different transitions to a photo gallery. Adding that extra bit of style and flavor. You can learn more about it via: Pip install dash-swiper -
Dash Insta Stories
pip install dash-insta-storiesThis is a component that resembles snapchat or stories from instagram. It allows the same functionality of timed or on click short videos or pictures. You can learn more about it here: Pip install dash-insta-stories -
Dash Credit Cards
pip install dash-credit-cardsAfter you’ve used all these other components to build a power house of an application, this component provides an elegant credit card form for you to monetize the next Facebook, Myspace or whatever company that has sprouted from your work and the Plotly/Dash framework. Offering a changeable card based on the credit card credentials provided and a security check you can professionally provide the UI to save payment information and monetize your ambitions.
With all this, hope you’ve been able to find something interesting, useful or inspiring. To be frank this framework has offered me an outlet for creativity, a worth while job with good pay and benefits and complete freedom as a remote developer. The path for anyone looking for the same is achievable and I’d like to encourage more developers to build out components for this community. If you have a good idea for a package feel open to try and build it out yourself or reply with suggestions on this post and I might built it.
Follow me on github, give stars to your favorite repository to show support and learn more about new releases and my work from: