-
-
Notifications
You must be signed in to change notification settings - Fork 61
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add mantine_light and mantine_dark plotly figure templates #431
Merged
AnnMarieW
merged 8 commits into
snehilvj:master
from
AnnMarieW:add-plotly-figure-templates
Dec 3, 2024
Merged
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
9817ca4
add mantine_light and mantine_dark plotly figure templates
AnnMarieW c09c8cd
update after review
AnnMarieW ca444b1
update to require calling the function to create templates in the app
AnnMarieW 036173b
changelog
AnnMarieW edf1163
Update dash_mantine_components/figure_templates.py
AnnMarieW 141b7af
change name to add_figure_templates
AnnMarieW 395709f
updated background colors
AnnMarieW d6f42eb
Merge branch 'master' into add-plotly-figure-templates
AnnMarieW File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
from .theme import DEFAULT_THEME | ||
import plotly.graph_objects as go | ||
import plotly.io as pio | ||
import copy | ||
|
||
|
||
def create_mantine_figure_templates(): | ||
""" | ||
Create Mantine-styled Plotly templates for both light and dark modes. | ||
registers templates with plotly.io.templates as "mantine_light" and "mantine_dark" | ||
""" | ||
|
||
colors = DEFAULT_THEME["colors"] | ||
font_family = DEFAULT_THEME["fontFamily"] | ||
# pallet generated from https://www.learnui.design/tools/data-color-picker.html#palette | ||
custom_colorscale = [ | ||
"#1864ab", # blue[9] | ||
"#7065b9", | ||
"#af61b7", | ||
"#e35ea5", | ||
"#ff6587", | ||
"#ff7c63", | ||
"#ff9e3d", | ||
"#fcc419", # yellow[5] | ||
] | ||
|
||
# Default theme configurations | ||
default_themes = { | ||
"light": { | ||
"colorway": [ | ||
colors[color][6] | ||
for color in ["blue", "red", "green", "violet", "orange", "cyan", "pink", "yellow"] | ||
], | ||
"paper_bgcolor": "#f8f9fa", | ||
"plot_bgcolor": "#ffffff", | ||
"gridcolor": "#dee2e6", | ||
}, | ||
"dark": { | ||
"colorway": [ | ||
colors[color][8] | ||
for color in ["blue", "red", "green", "violet", "orange", "cyan", "pink", "yellow"] | ||
], | ||
"paper_bgcolor": "#1a1b1e", | ||
"plot_bgcolor": "#25262b", | ||
"gridcolor": "#343a40", | ||
} | ||
} | ||
|
||
def make_template(name): | ||
#Start with either a light or dark Plotly template | ||
base = "plotly_white" if name == "light" else "plotly_dark" | ||
template = copy.deepcopy(pio.templates[base]) | ||
|
||
layout = template.layout | ||
theme_config = default_themes[name] | ||
|
||
# Apply theme settings | ||
layout.colorway = theme_config["colorway"] | ||
layout.colorscale.sequential = custom_colorscale | ||
layout.piecolorway = theme_config["colorway"] | ||
layout.paper_bgcolor = theme_config["paper_bgcolor"] | ||
layout.plot_bgcolor = theme_config["plot_bgcolor"] | ||
layout.font.family = font_family | ||
|
||
# Grid settings | ||
for axis in (layout.xaxis, layout.yaxis): | ||
axis.gridcolor = theme_config["gridcolor"] | ||
axis.gridwidth = 0.5 | ||
axis.zerolinecolor = theme_config["gridcolor"] | ||
|
||
# Geo settings | ||
layout.geo.bgcolor = theme_config["plot_bgcolor"] | ||
layout.geo.lakecolor = theme_config["plot_bgcolor"] | ||
layout.geo.landcolor = theme_config["plot_bgcolor"] | ||
|
||
# Hover label settings | ||
layout.hoverlabel.font.family = font_family | ||
|
||
# Scatter plot settings | ||
template.data.scatter = (go.Scatter(marker_line_color=theme_config["plot_bgcolor"]),) | ||
template.data.scattergl = (go.Scattergl(marker_line_color=theme_config["plot_bgcolor"]),) | ||
|
||
return template | ||
|
||
|
||
# #register templates | ||
pio.templates["mantine_light"] = make_template("light") | ||
pio.templates["mantine_dark"] = make_template("dark") | ||
|
||
return None | ||
|
||
|
||
# Create and register templates | ||
create_mantine_figure_templates() | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm a little uneasy about automatically calling this - the convenience is great, but it's a bit magical. For example if you like these themes and want to use them without DMC, you have to know to import the package anyway and silence your linter.
Curious if perhaps @ndrezn you know whether any other packages add their own templates like this, or if you have thoughts on this pattern?
If we do automatically call this, there's no reason to import it by name in
__init__.py
- justimport .figure_templates
will do.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I started with requiring it to be imported in an app, but thought it was an unnecessary line of code when it could just be made available, but I see your point about it being too magical.
I can't imagine why anyone would use this outside of DMC though. It's not different enough from
plotly_white
andplotly_dark
themes. It's just tweaked a little to make it look better with the color tones used in the default DMC theme.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is okay, but I also haven't seen it before. It's quite nice to be able to use the templates API natively but I agree it's not obvious what's going on.
Probably worth a specific documentation page that explains how to do this and maybe provides a reduced import if you want to use just the named themes but not the rest of Mantine (
from dash_mantine_components import templates
?)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If it's documented that when you use the dmc library, you will have access to the "mantine_light" and "mantine_dark" templates, shouldn't that be OK?, Why is that any more magical than having access to all the other built-in templates that come with the Plotly library? They are not set as defaults - you have to specify them in the figure definition otherwise you get the standard "plotly" template. I really don't think people would want to use these templates if they are not using DMC
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It feels somewhat magical to me because with the built-in templates you can go look for docs on the
template
arg and you immediately get to https://plotly.com/python/templates/#view-available-themes - which lists all the built-in templates, and you can go from there to learn about each of these templates. With these ones, an operation that normally has no side-effects (importing a library) results in extra options being available in a different library, so if you want to learn about these or if they disappeared and you want to know how to get them back, what do you do?That said, given that the new options have the name
mantine
in them and that's a pretty distinctive name, it probably wouldn't be too hard for users to connect the dots and figure out that they came fromdash_mantine_components
- then if it's obvious how to find them in the docs we're good. Also we document exactly the pattern you're using 😅 https://plotly.com/python/templates/#saving-and-distributing-custom-themesSo OK, let's leave it as is. Then I'd still change the import in
__init__.py
to justimport .figure_templates
😎I don't think we can do this - importing a submodule will always import the parent - so unless we wanted to move the rest of DMC out of the top-level module we're always going to get it. Anyway I guess @AnnMarieW is right that this is similar enough to built-in themes that this is unlikely to come up much.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah, OK, I get it now:
You're right - it's better to make this a function that is called in the app. Also, if it's a function, I could make it so you could set the default to one of these templates, which would be very convenient when not using a theme switcher.
Next trick would be to make it possible to redraw the figure when the theme changes without updating the entire figure in a callback, but I think that would need a custom
Graph
component based ondcc.Graph
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Haha we convinced each other to swap places 🔀
Being able to set the default is really nice though, so this is great. I do have a slight preference for shortening the function name - could it just be
add_figure_templates
? It doesn't needmantine
in the name because it's already in thedash_mantine_components
package, and to my mind the key verb isadd
, ie add them to the Plotly options.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree, I wasn’t a fan of the name, but couldn’t think of a better one. I like your suggestion 🙂