Custom Plotly Dash components based on Mantine React Components library

Related tags

Data Visualization python plotly plotly-dash mantine
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.
Comments
  • 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
  • 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 9
  • 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
  • DateRangePicker Singe Date Selection Issues

    DateRangePicker Singe Date Selection Issues

    Hello,

    Really appreciate your work on this awesome project!

    I'm having issues selecting a single date with the daterangepicker. The first issue is with the UI as shown below. When trying to select a single date the first time, the selection simply disappears. However, the second time I select a single date, it stays.

    https://user-images.githubusercontent.com/81941044/155823051-aebb582d-e2f4-44bd-a8d9-7200f4520c81.mov

    The second issue is triggering a callback with a single date selection. Can this be done? I was hoping the callback value would be something along the lines of ["selected_start_date", maxDate], but a single selection does not appear to trigger the callback.

    Thanks in advance for any help.

    opened by bigmike36c 5
  • 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
  • Black bars in MultiSelect Dropdown window

    Black bars in MultiSelect Dropdown window

    I've been faced with the problem, that my Dropdown window shows black bars at the bottom an on the right side. This seems not to be related with used CSS. How can I solve this problem? Beside of the problem this is a really fantastic component.

    Bildschirmfoto 2022-11-17 um 17 28 59

    opened by Tomax77 4
  • ActionIcon n_clicks prop not triggering when assigned to bullet prop of TimelineItem

    ActionIcon n_clicks prop not triggering when assigned to bullet prop of TimelineItem

    It appears that the ActionIcon n_clicks prop is not triggering callbacks when assigned to the bullet prop of a TimelineItem component, for example:

    dmc.Timeline(dmc.TimelineItem(
    bullet=[
        dmc.ActionIcon(dmc.Avatar(src="https://avatars.githubusercontent.com/u/91216500?v=4", radius='xl', size=40), id='test') 
    ],
    title='Test'
))

    Here is a sample callback, and you'll notice that it does not get triggered on click of the ActionIcon:

    @app.callback(
    Output('empty-div', 'children'),
    [Input('test', 'n_clicks')])
def test_clicks(n):

    print(n)

    Fully reproducible example below:

    import dash, flask
from dash import Dash, html, dcc, Input, Output, State, ALL, MATCH, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash_iconify import DashIconify

server = flask.Flask(__name__, static_folder='assets')

app = Dash(
    __name__,
    server=server,
    update_title=None
)

app.title = 'Test'
app.config.suppress_callback_exceptions = True

app.layout = html.Div([

    dmc.Timeline(dmc.TimelineItem(
        bullet=[
            dmc.ActionIcon(dmc.Avatar(src="https://avatars.githubusercontent.com/u/91216500?v=4", radius='xl', size=40), id='test') 
        ],
        title='Test'
    )),

    html.Div(id='empty-div')

])

@app.callback(
    Output('empty-div', 'children'),
    [Input('test', 'n_clicks')])
def test_clicks(n):

    print(n)

if __name__ == '__main__':
    app.run_server(port=8500)
    opened by rick643charts 4
  • Accordion with dbc.Slider() and vertical=True, the text is mixed

    Accordion with dbc.Slider() and vertical=True, the text is mixed

    Hello,

    When I use the Accordion: -with dash_bootstrap_components (dbc), - the Slider on vertical.

    The text is mixed together. Here is a short example.

    from dash import Dash, html, dcc
import dash_mantine_components as dmc
from dash_iconify import DashIconify
import dash_bootstrap_components as dbc

INTERVALS = ["1m", "3m", "5m", "15m", "30m", "1h", "2h", "4h", "6h", "8h", "12h", "1d", "3d", "1w", "1M"]
VALID_INTERVALS = {i: v for i, v in enumerate(INTERVALS)}


def get_slider():
    return dcc.Slider(
        0, len(VALID_INTERVALS) - 1,
        step=None,
        marks=VALID_INTERVALS,
        value=0,
        vertical=True,
        id="slider-interval",
    )


app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])


def with_dbc():
    return dbc.Accordion([
        dbc.AccordionItem(get_slider(), title="Settings")
    ])


def with_dmc():
    return dmc.Accordion(
        disableChevronRotation=True,
        children=dmc.AccordionItem([
            dmc.AccordionControl("Settings", icon=DashIconify(icon="fluent:settings-32-regular", width=20)),
            dmc.AccordionPanel(get_slider())
        ], value="settings")
    )


app.layout = html.Div(
    # with_dbc()
    with_dmc()
)

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

    I tried with your slider, but it doesn't have vertical option. I wanted to use the Iconify with the accordion. But I need vertical slider.

    Thanks ;)

    opened by nolimitech 0
  • NotificatinProvider warning in console

    NotificatinProvider warning in console

    @snehilvj I took an MRE from here - https://github.com/snehilvj/dash-mantine-components/issues/125 The console warning reproduces from there too for me

    11:40:52.993 react_devtools_backend.js:4012 Warning: Cannot update a component (`@mantine/notifications/NotificationsProvider`) while rendering a different component (`s`). To locate the bad setState() call inside `s`, follow the stack trace as described in https://fb.me/setstate-in-render
    in s (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by it)
    in it (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in @mantine/notifications/NotificationsProvider (created by l)
    in l (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider

    MRE

    from dash import Dash, Input, Output, callback, html

import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = dmc.NotificationsProvider(
    [
        html.Div(id="notify-container"),
        dmc.Group(
            children=[
                dmc.Button(
                    "Load Data",
                    id="show-notification",
                ),
            ],
        ),
    ]
)


@callback(
    Output("notify-container", "children"),
    Input("show-notification", "n_clicks"),
    prevent_initial_call=True,
)
def notify(nc1):
    return [
        dmc.Notification(
            id=name,
            message=name,
            action="show",
            autoClose=10000,
        )
        for name in ["first", "second", "third", "fourth"]
    ]


if __name__ == "__main__":
    app.run_server(debug=True)
    opened by dales 0
  • Supply property to be able to set `spellcheck` attribute on input fields

    Supply property to be able to set `spellcheck` attribute on input fields

    When using inputs such as the JSON input it would be nice to be able to disable the spellcheck via property that would set the attribute to true or false on the