Custom Plotly Dash components based on Mantine React Components library

Overview

Dash Mantine Components

Dash Mantine Components is a Dash component library based on Mantine React Components Library. It makes it easier to create good quality dashboards with very well designed components out of the box.

Installation

pip install dash-mantine-components

Available Components

Quickstart

import dash_mantine_components as dmc
from dash import Dash, Input, Output
from datetime import datetime, timedelta

app = Dash(__name__)

app.layout = html.Div(
    [
        dmc.DatePicker(
            id="datepicker", format="dddd, MMMM D, YYYY", style={"width": "250px"}
        ),
        dmc.Space(h=20),
        dmc.Text(id="text"),
        dmc.Button("Click Me!")
    ]
)


@app.callback(Output("text", "children"), Input("datepicker", "date"))
def datepicker(date):
    return date


if __name__ == "__main__":
    app.run_server(debug=True)

TODO:

  1. Add more components from Mantine library and enhance already added ones.
  2. Create documentation.
  3. Support dark theme.
  4. Create more examples.
  5. Add contributing guide.
Issues
  • trying to use MultiSelect in a Modal. No values show in dropdown

    trying to use MultiSelect in a Modal. No values show in dropdown

    Hello, I am trying to implement a Multiselect object in a modal but when I open the modal, none of the values show. Is this a known issue or am I doing this wrong?

    Here is my modal code. I tested it and it works in my main form, but not in a modal:

                dbc.ModalBody(
                    id="value_picker_modal_body",
                    children=[
                        dmc.MultiSelect(
                            label="Select 3D-axis plot variables:",
                            id="selected-3d-attr",
                            value=[],
                            data=[
                                {"value": "parameter1", "label": "Parameter1"},
                                {"value": "parameter2", "label": "Parameter2"},
                                {"value": "attribute1", "label": "Attribute1"},
                                {"value": "attribute2", "label": "Attribute2"},
                            ],
                            creatable=True,
                            clearable=True,
                        ),
                    ],
                    style={"height": "60vh", "overflow": "scroll"},
    
                )
    

    The result is when I click in the dropdown on the modal window, nothing happens. Is there a parameter I need to make it run in a modal window?

    Thanks.

    opened by blanning19 11
  • DatePicker does not hold selected value, displays one day prior to selection

    DatePicker does not hold selected value, displays one day prior to selection

    The DatePicker component appears to not hold the selected value after losing focus. It seems to select one day prior to the selected value. This issue can be replicated in the first example here by attempting to select February 3, 2022. After losing focus, the underneath text will show the correct selected value, however the display value in the DatePicker component will display February 2, 2022.

    As a heavy user of the Dash Bootstrap Components library, these components are a great supplement, thank you for your work!

    opened by rick643charts 10
  • Add RingProgress component

    Add RingProgress component

    This PR adds the RingProgress component. Here is a small example,

    import dash_mantine_components as dmc
    from dash import Dash, html
    
    app = Dash()
    app.layout = html.Div([
        dmc.RingProgress(
            sections = [
                dict(value=50, color="red"),
                dict(value=50, color="blue"),
            ],
            label=[dmc.Center("Label", style=dict(width="100%"))]
        ),
    ])
    
    if __name__ == '__main__':
        app.run_server(port=7777)
    

    image

    opened by emilhe 9
  • LoadingOverlay component

    LoadingOverlay component

    Hi

    A newbie to web development here. for newbies like me, this package is a god-send. I can't thank you enough for putting this together and doing such an amazing job at docs (which I am using to learn) as well!

    Do you think we could have the below from mantine as well please?

    https://mantine.dev/core/loading-overlay/

    I am not very good at web development, but, if there is a straight forward way to migrate, I am happy to help and send a PR. if you do this one, I will make a note of steps and follow it through to migrate others - how does that sound?

    thanks Roh

    opened by Roh-codeur 8
  • Add Mantine default colors

    Add Mantine default colors

    This is a tiny PR to add the default colors as a Python object. It can be quite useful when composing themes.

    I am not entirely convinced that a dict is the best representation, it could be nicer to access each list per attribute (colors.red vs colors["red"]). Any thoughts are appreciated!

    As this is the first non-component submodule, I am also 100% open to a better structure. To me it makes sense to add to theme/__init__.py, so it can be imported using dash_mantine_components.theme. I am happy to change otherwise.

    opened by jlfsjunior 6
  • Add persistence props

    Add persistence props

    Add persistence to the following components: Select, MultiSelect, DatePicker, DateRangePicker, TimeInput, Checkbox, RadioGroup.

    I stole the docstrings from dcc.Dropdown with minor changes. Let me know if you prefer something shorter... If it is fine, then I will check if it makes sense to add these props to other components.

    opened by jlfsjunior 5
  • Documentation for the library

    Documentation for the library

    Hi I'm starting this thread as I need some help from the community in creating the documentation for the library.

    I have started a project dmc-demo for this, and its deployed here. The latest version that's been released is 0.2.1, but before I move on with further releases, I'd like to work on the documentation, without which, people can obviously not use it properly.

    I am already looking at the docs for official dash components and the docs for dash bootstrap components.

    If anyone has any suggestions for the docs or some resources I can use, or some pointers for starting out, please do provide them.

    Thanks

    @emilhe @Karan-S-Mittal

    opened by snehilvj 5
  • Component similar to Loader

    Component similar to Loader

    Hi

    Thanks for putting this together and your help earlier with Loader. May I request for a loader component similar to the below. The one you helped with earlier, seems to work with a Button. I now have a requirement to show loader when, say, the page/tab loads. One option is to use Skeleton, however, I feel Loader looks better

    https://dash.plotly.com/dash-core-components/loading

    please do let me know if there is a way to achieve this and sorry if I missed anything

    Thanks

    opened by Roh-codeur 4
  • Examples for all components are needed

    Examples for all components are needed

    Hi, I was going through Readme and none of the examples are present right now. This is an amazing package @snehilvj. Thanks for creating it. I would like to help with examples of things if you will allow me. Thanks and Regards, Karan

    opened by Karan-S-Mittal 4
  • Passing custom control to menu?

    Passing custom control to menu?

    Is there a way to pass a custom control to Menu? Currently I get the '...' ActionItem, but would really like to use my own button as described in https://mantine.dev/core/menu/.

    Great job, btw. Very helpful!

    opened by john-wallace-dev 3
  • Fixes bug; chip disabled state not passed to component

    Fixes bug; chip disabled state not passed to component

    Currently, it is not possible to set the disabled state for chips, as the state is not passed to the react layer. This PR fixes the bug.

    from dash import Dash
    import dash_mantine_components as dmc
    
    app = Dash()
    app.layout = dmc.Chips(
        data=[{"value": c, "label": c, "disabled": c == "£"} for c in ["€", "£", "$", "¥"]]
    )
    
    app.run_server(port=7779)
    
    opened by emilhe 3
  • Does dmc.MultiSelect creatable argument allow the user to enter a custom option?

    Does dmc.MultiSelect creatable argument allow the user to enter a custom option?

    First I would like to say that these components are great!

    I have the following:

    dmc.MultiSelect(
        label="My Dropdown",
        id="my-dropdown",
        value=[],
        data=[
            {"value": "parameter1", "label": "Parameter1"},
            {"value": "parameter2", "label": "Parameter2"},
            {"value": "attribute1", "label": "Attribute1"},
            {"value": "attribute2", "label": "Attribute2"},
        ],
        creatable=True,
    )    
    

    I was expecting that with the creatable=True argument I would be able to add a new option to the dropdown.

    Does MultiSelect component allow the user to add new options on the fly?

    Thanks, David

    opened by df-seagate 0
  • Support for RangeSlider Input

    Support for RangeSlider Input

    Congratulations on such an awesome development!

    Any plans for supporting the RangeSlider component? It seems to be available in Mantine, so I hope it is not hard work.

    Thank you in advance!

    opened by jajberni 0
  • switch progress bar color depending on the theme

    switch progress bar color depending on the theme

    Hi there,

    Again, this is not really issue. Because you don't have a discussion section, I'll post my question here; hope that's okay?

    My question: is there a way to change the colours in the progress bar after changing the theme, so that the colour looks more consistent with each of the dark/light background?

    Allow me to explain:

    In light mode, the progress bars now look like this:

    Screenshot 2022-06-15 at 02 08 26

    In the dark mode:

    Screenshot 2022-06-15 at 02 08 36

    Because of the dark background, it is far too gleaming.

    The obvious solution is to use a callback to switch colours on the fly with a theme switch. As an example:

    @callback(
        Output(component_id="progress_bar", component_property="sections"),
        Input(component_id="theme_switch", component_property="n_clicks"),
    )
    def on_switch():
        """blablabla"""
        return ["""__some sections with new colors___"""]
    

    The problem with this method is that none of the supported colours are appropriate for the dark mode (apart from dark and gray). I am thinking of something like a "darker indigo": "dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"

    Is it possible to make the progress bar colour look more "darky" in dark themes? Perhaps by adjusting the transparency? Is this currently an option?

    Great work! Don

    opened by Don-Yin 4
  • dayStyle property in datePicker

    dayStyle property in datePicker

    Hi! I have a database with some information over the years. The user using the datePicker can select a day and if there is data then it can continue but if not an alert is generated. I would like it to make it easier for the user to select a date by highlighting the days with data with a green background (so when creating the component I would pass in a list of days and modify its appearance). I have seen this is possible in the original library Styles based on date by using the property dayStyle but I am not sure if this is possible in the python version since it does not appear in the documentation.

    image

    opened by Juasmis 0
  • onLabel and offLabel not working in switch component (Inner Labels)

    onLabel and offLabel not working in switch component (Inner Labels)

    Inner Labels

    import dash_mantine_components as dmc

    dmc.Switch( label="I agree to sell my privacy", onLabel="ON", offLabel="OFF" )

    Also the bullet is not positioned at center of slot, its is top aligned

    opened by jinopg 8
  • stepper development complete

    stepper development complete

    The Stepper component is also ready... I have fixed all the problems you pointed me out the other time. Let me know if it is still needing any modification

    This PR has the components:

    • Stepper
    • StepperStep
    • StepperCompleted

    stepper-component

    Full code the test and reproduce the component is:

    import dash
    from dash import dcc, html, Input, Output, State
    import dash_mantine_components as dmc
    
    app = dash.Dash(__name__)
    
    app.layout = html.Div(
        className="text-center",
        children=[
            html.Div([
            html.Div([html.B("DMC - Dash Mantine Components")]),
            
                html.Div("Stepper, StepperStep & StepperCompleted Components test", style={"marginBottom":"72px"}),
                dmc.Stepper(active=0, 
                            id="stepper-test",
                            children=[dmc.StepperStep(label="Fist step", description="Create an account", children="Step 1 content: Create an account"),
                                      dmc.StepperStep(label="Second step", description="Verify email", children="Step 2 content: Verify email"),
                                      dmc.StepperStep(label="Final step", description="Get full access", children="Step 3 content: Get full access"),
                                      dmc.StepperCompleted(children="Completed, click back button to get to previous step")
                                      ], style={"marginBottom":"32px"}),
                dmc.Center(
                    [
                        dmc.Button("Back", id="back-btn", style={"marginRight":"5px"}),
                        dmc.Button("Next", id="next-btn")
                    ]),
                html.Div(id="output-content")
            ], style={"margin":"0 auto", "width": "650px", "textAlign":"center "})],
        style={"padding": "64px"})
    
    
    @app.callback(Output("stepper-test", "active"),
                  Input("back-btn", "n_clicks"),
                  Input("next-btn", "n_clicks"),
                  State("stepper-test", "active"),
                  State("stepper-test", "children"),
                  prevent_initial_call=True
                  )
    def stepper_test(back, next, active_idx, step_children):
        ctx = dash.callback_context
    
        if not ctx.triggered:
            return dash.no_update
        else:
            button_id = ctx.triggered[0]['prop_id'].split('.')[0]
            
        if button_id == "back-btn":
            if active_idx > 0:
                return active_idx-1
            else:
                return dash.no_update
        else:
            if active_idx < len(step_children)-1:
                return active_idx+1
            else:
                return dash.no_update
    
    @app.callback(Output("output-content", "children"),
                  Input("stepper-test", "active"),
                  )
    def stepper_test(step):
        return f"Active Index {step}"
    
    
    if __name__ == "__main__":
        app.run_server(debug=True, port=9966)
    
    opened by kaburelabs 0
Releases(0.10.2)
  • 0.10.2(Jun 8, 2022)

  • 0.10.1(Jun 5, 2022)

  • 0.10.0(Jun 5, 2022)

  • 0.9.0(Jun 1, 2022)

  • 0.8.0(May 1, 2022)

    Added

    • ActionIcon component
    • DemoSlider, ThemeSwitcher (Specific to dmc-docs)

    Fixed

    • Missing default icon bug in Accordion and Blockquote.
    • Slider onChange callbacks
    • New props in various components
    • Add persistence to all inputs as well as tabs
    Source code(tar.gz)
    Source code(zip)
  • 0.7.0(Mar 27, 2022)

    This release is based on Mantine 4.0. So beware of a few backward incompatible changes. Have a look at Mantine changelog before migration.

    Added

    • New components:
      • Menu, MenuItem, MenuLabel
      • Code
      • List, ListItem
      • BackgroundImage

    Fixed

    • Chip disabled state was not passed to component.
    Source code(tar.gz)
    Source code(zip)
  • 0.6.0(Mar 8, 2022)

    Added

    • New components (thanks @kaburelabs):
      • Kbd
      • Avatar, AvatarGroup
      • Highlight
      • Timeline, TimelineInput
      • Mark
      • MediaQuery

    Fixed

    • DateRangePicker will clean up the half selected range on dropdown close. #47
    • DatePicker and DateRangePicker timezone issue. #33
    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(Feb 21, 2022)

    Added

    • LoadingOverlay component similar to dcc.Loading
    • Persistence in DatePicker, DateRangePicker, MultiSelect, RadioGroup, Select, TimeInput

    Fixed

    • Skeleton component was not using loading_states.
    Source code(tar.gz)
    Source code(zip)
  • 0.4.1(Feb 5, 2022)

  • 0.4.0(Feb 1, 2022)

    Added

    • New components (thanks @emilhe):
      • NumberInput
      • JsonInput
      • ThemeIcon
      • Table
      • RingProgress
      • TimeInput
      • Loader
      • ColorPicker

    Fixed

    • Props in SimpleGrid, Navbar, Header, Spoiler, and Title.

    Removed

    • inline prop from Center, as it doesn't work right now.
    Source code(tar.gz)
    Source code(zip)
  • 0.3.1(Jan 22, 2022)

  • 0.3.0(Jan 18, 2022)

    Fixed

    • DatePicker and DateRangePicker will now accept date/dates through callbacks. #23.
    • Updated props for some components to follow Mantine components more strictly.

    Added

    • MantineProvider to allow theming, more specifically dark theme.
    • Support for passing and rendering components other than chidren.
    • Transition and shadow props to all components that support them.
    • A new Notification component.

    Removed

    • Removed the NotificationHandler component which was not easy to work with.

    Changed

    • DatePicker and DateRangePicker now accept date/dates under the prop name value to support pattern matching callbacks and to follow the Mantine convention.
    Source code(tar.gz)
    Source code(zip)
  • 0.2.2(Jan 7, 2022)

    • Added InputWrapper, ColorInput, Header, Navbar, etc.
    • Support class_name prop
    • Corrected prop definitions
    • Updated to latest mantine - 3.5.1
    Source code(tar.gz)
    Source code(zip)
  • 0.2.1(Dec 28, 2021)

  • 0.2.0(Dec 5, 2021)

    Library has around 40 components now. Highlights: * Added a Notifications provider * Datepicker can show multiple months * Added Progress bar

    Source code(tar.gz)
    Source code(zip)
  • 0.1.0(Nov 13, 2021)

Owner
Snehil Vijay
Snehil Vijay
A curated list of awesome Dash (plotly) resources

Awesome Dash A curated list of awesome Dash (plotly) resources Dash is a productive Python framework for building web applications. Written on top of

Luke Singham 1.6k Jun 26, 2022
A dashboard built using Plotly-Dash for interactive visualization of Dex-connected individuals across the country.

Dashboard For The DexConnect Platform of Dexterity Global Working prototype submission for internship at Dexterity Global Group. Dashboard for real ti

Yashasvi Misra 2 Jun 15, 2021
A shimmer pre-load component for Plotly Dash

dash-loading-shimmer A shimmer pre-load component for Plotly Dash Installation Get it with pip: pip install dash-loading-extras Or maybe you prefer Pi

Lucas Durand 3 Feb 16, 2022
Regress.me is an easy to use data visualization tool powered by Dash/Plotly.

Regress.me Regress.me is an easy to use data visualization tool powered by Dash/Plotly. Regress.me.-.Google.Chrome.2022-05-10.15-58-59.mp4 Get Started

Amar 14 Jun 24, 2022
A guide for using Bootstrap 5 classes in Dash Bootstrap Components V1

dash-bootstrap-cheatsheet This handy interactive cheatsheet makes it easy to use the Bootstrap 5 classes with your Dash app made with the latest versi

null 5 May 28, 2022
The interactive graphing library for Python (includes Plotly Express) :sparkles:

plotly.py Latest Release User forum PyPI Downloads License Data Science Workspaces Our recommended IDE for Plotly’s Python graphing library is Dash En

Plotly 11.7k Jul 2, 2022
The interactive graphing library for Python (includes Plotly Express) :sparkles:

plotly.py Latest Release User forum PyPI Downloads License Data Science Workspaces Our recommended IDE for Plotly’s Python graphing library is Dash En

Plotly 8.9k Feb 18, 2021
Productivity Tools for Plotly + Pandas

Cufflinks This library binds the power of plotly with the flexibility of pandas for easy plotting. This library is available on https://github.com/san

Jorge Santos 2.6k Jul 3, 2022
Productivity Tools for Plotly + Pandas

Cufflinks This library binds the power of plotly with the flexibility of pandas for easy plotting. This library is available on https://github.com/san

Jorge Santos 2.1k Feb 18, 2021
A Simple Flask-Plotly Example for NTU 110-1 DSSI Class

A Simple Flask-Plotly Example for NTU 110-1 DSSI Class Live Demo Prerequisites We will use Flask and Ploty to build a Flask application. If you haven'

Ting Ni Wu 1 Dec 11, 2021
Peloton Stats to Google Sheets with Data Visualization through Seaborn and Plotly

Peloton Stats to Google Sheets with Data Visualization through Seaborn and Plotly Problem: 2 peloton users were looking for a way to track their metri

null 8 Feb 9, 2022
Yata is a fast, simple and easy Data Visulaization tool, running on python dash

Yata is a fast, simple and easy Data Visulaization tool, running on python dash. The main goal of Yata is to provide a easy way for persons with little programming knowledge to visualize their data easily.

Cybercreek 3 Jun 28, 2021
Getting started with Python, Dash and Plot.ly for the Data Dashboards team

data_dashboards Getting started with Python, Dash and Plot.ly for the Data Dashboards team Getting started MacOS users: # Install the pyenv version ma

Department for Levelling Up, Housing and Communities 1 Nov 8, 2021
Sentiment Analysis application created with Python and Dash, hosted at socialsentiment.net

Social Sentiment Dash Application Live-streaming sentiment analysis application created with Python and Dash, hosted at SocialSentiment.net. Dash Tuto

Harrison 450 Jun 4, 2022
GD-UltraHack - A Mod Menu for Geometry Dash. Specifically a MegahackV5 clone in Python. Only for Windows

GD UltraHack: The Mod Menu that Nobody asked for. This is a mod menu for the gam

zeo 1 Jan 5, 2022
Visualization Website by using Dash and Heroku

Visualization Website by using Dash and Heroku You can visit the website https://payroll-expense-analysis.herokuapp.com/ In this project, I am interes

YF Liu 1 Jan 14, 2022
Generating interfaces(CLI, Qt GUI, Dash web app) from a Python function.

oneFace is a Python library for automatically generating multiple interfaces(CLI, GUI, WebGUI) from a callable Python object. oneFace is an easy way t

NaNg 27 Jun 22, 2022
Custom ROI in Computer Vision Applications

EasyROI Helper library for drawing ROI in Computer Vision Applications Table of Contents EasyROI Table of Contents About The Project Tech Stack File S

null 32 Jun 25, 2022
A script written in Python that generate output custom color (HEX or RGB input to x1b hexadecimal)

ColorShell ─ 1.5 Planned for v2: setup.sh for setup alias This script converts HEX and RGB code to x1b x1b is code for colorize outputs, works on ou

Riley 4 Oct 31, 2021