Add reference dashboard

[MarcSkovMadsen]

I believe a nice way to review this library before launch is to create one or more reference applications.

This PR adds a Dashboard reference application inspired by Creative Tim Dashboard.

In addition some bugs are fixed and enhancements contributed to enable creating the dashboard.

This PR is Closing:

• TextInput size not working #141
• Enable me to create link buttons #142
• Drawer Issues #189
• Seperate Drawer component #144

Must have fixed

• stretch_width not working #139
• Button and IconButton clicks not working #145
• Add Floating Action Button #147
• ECharts do not stretch when Paper is used #152
• Fab not working #167
• Document List component #164
• Describe how to create your own Material UI components #150
• Duplicate qualified model declaration of 'MuiNotification' #188
• Support @mui/lab in MaterialUIComponent #190
• ThemeToggle not toggling Paper theme #193
• Change shorthand to pmu #156

Nice to have fixed

• Enable me to disable Header links in Markdown holoviz/panel#7878
• Dark mode how-to guide #154
• Column not a material component and no BasePage #153
• Support tooltips #148
• Enable me to use Material UI Icons in HTML and Markdown pane #151
• ThemeToggle value not working #192

Should do

• Get dark theme including Switch working
• Add missing table to table page
• Create custom color picker for context menu.
• Get dark sidebar mode working, i.e. set color to something readable
• Figure out how to use theme_config correctly to set background color of app.
• Format and refactor code to make it readable and maintainable.
• Make app accessible as showcase and learning tool
  • Add picture or video of App to README or docs.
  • Make tutorials
  • Deploy app

Could do

• Speed up app to make it load super fast.
• Layout dashboard in grid
• Make it work on mobile.

Creative Tim

Creative Panel

[MarcSkovMadsen]

Don't know why, but HTML panes suddenly started having invinsible context

And when I replace HTML pane with pn.panel it choses Markdown pane and does not display icons?

[MarcSkovMadsen]

Buttons can now stretch. But since they align the text and icon center they don't seem to be a good fit for a menu.

I think what is needed is something built on top of List.

Unfortunately the ListItemButton does not take the color or variant props.

[MarcSkovMadsen]

I can see that a List item has been implemented. As its not documented in any way its hard to know if it can be used. One problem is that its buttons does not support href property.

[MarcSkovMadsen]

This PR now contains a Timeline component which can look like

import param
import panel as pn
from panel_material_ui.pane import Timeline
from panel_material_ui import Page

if __name__.startswith("bokeh"):
    pn.extension()
    

    demo_items = [
        {"content_title": "Eat", "content": "Because you need strength", "opposite": "08:30", "color": "grey",   "variant": "filled", "icon": "fastfood"},
        {"content_title": "Code", "content": "Because it's awesome!", "opposite": "09:00", "color": "primary", "variant": "filled", "icon": "laptop_mac"},
        {"content_title": "Sleep", "content": "Because you need rest", "opposite": "09:30", "color": "secondary",   "variant": "outlined", "icon": "hotel"},
        {"content_title": "Repeat", "content": "Because this is the life you love!", "opposite": "11:00", "color": "success",      "variant": "filled", "icon": "repeat"},
    ]

    timeline = Timeline(object=demo_items, width=600)

    Page(
        main=[
          "## Material‑UI Timeline (Panel custom component)", timeline,],
    ).servable()

It can also look like

[MarcSkovMadsen]

The PR will add an Icon indicator widget.

import panel as pn
from panel_material_ui import Icon

Icon(
    value="home"
).servable()

[MarcSkovMadsen]

This PR will include a ChangeIndicator component. Currently its a part of panel-material-ui because I cannot figure out how to show icons if not in a MaterialWidget.

ChangeIndicator(
        title="Today's Money", icon="weekend", value="$53,000", change_percent=55, since="since yesterday", sizing_mode="stretch_width"
    )

[MarcSkovMadsen]

This PR now includes a Drawer component.

[philippjfr]

Yes agreed, I was going to work on this tonight. Are you okay with me taking it over?

[MarcSkovMadsen]

Yes agreed, I was going to work on this tonight. Are you okay with me taking it over?

Would be very grateful.

[MarcSkovMadsen]

I have not documented this one yet. I could not get it working without being a MaterialWidget, so I included it here. But I would like to give it a 2nd iteration later to find a more general API for a such a Card/ Indicator.

[philippjfr]

What's wrong with it being a MaterialWidget?

[MarcSkovMadsen]

For me it ok. But there could be other Card like indicator widgets. I'm not sure what the most important/ generic are?

[philippjfr]

Didn't quite get there tonight, but will tomorrow.

[philippjfr]

Actually thinking about it, I would prefer not to ship Timeline for the time being. It's still a mui/lab component which means it's not stable and it's also not a must have imo.

[MarcSkovMadsen]

The challenge I have is that I don't know how to get Icons working if its not a MaterialComponent.

[MarcSkovMadsen]

Would it be OK to introduce a .lab module with the same purpose as the Material UI lab concept? And then put the Timeline there?

Its a common thing. For example Streamlit has streamlit.experimental module.

[MarcSkovMadsen]

I've moved the Timeline out of panel_material_ui to seperate example MaterialUIComponent. But now I have issues described in #190.