diff --git a/vizro-core/changelog.d/20240405_135655_huong_li_nguyen_change_theme_default.md b/vizro-core/changelog.d/20240405_135655_huong_li_nguyen_change_theme_default.md new file mode 100644 index 000000000..f1558014b --- /dev/null +++ b/vizro-core/changelog.d/20240405_135655_huong_li_nguyen_change_theme_default.md @@ -0,0 +1,48 @@ + + + + + + +### Changed + +- Change default continuous color scale to `SEQUENTIAL_CYAN`. ([#407](https://github.com/mckinsey/vizro/pull/407)) + + + + + diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 11f21e685..5a71dcd9a 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,31 +1,55 @@ """Example to show dashboard configuration.""" +from typing import Optional + +import pandas as pd import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro -from vizro.tables import dash_ag_grid +from vizro.models.types import capture + +gapminder_pos = px.data.gapminder() +gapminder_neg = px.data.gapminder() +gapminder_mixed = px.data.gapminder() +gapminder_neg["lifeExp"] = gapminder_neg["lifeExp"] * (-1) +gapminder_mixed.loc[:200, "lifeExp"] = gapminder_mixed.loc[:200, "lifeExp"] * (-1) + + +@capture("graph") +def variable_map(data_frame: pd.DataFrame = None, color: Optional[str] = None, title: Optional[str] = None): + """Custom choropleth figure that needs post update calls.""" + fig = px.choropleth( + data_frame, + locations="iso_alpha", + color=color, + hover_name="country", + labels={ + "year": "year", + "lifeExp": "Life expectancy", + "pop": "Population", + "gdpPercap": "GDP per capita", + }, + title="Global development over time", + ) + fig.update_layout(showlegend=False, title=title) + fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "right"}}) + return fig -df = px.data.gapminder() page = vm.Page( - title="Enhanced AG Grid", + title="Autocolorscale", + layout=vm.Layout(grid=[[0, 1, 2]]), components=[ - vm.AgGrid( - title="Dash AG Grid", - figure=dash_ag_grid( - data_frame=df, - columnDefs=[ - {"field": "country", "floatingFilter": True, "suppressHeaderMenuButton": True}, - {"field": "continent", "floatingFilter": True, "suppressHeaderMenuButton": True}, - {"field": "year"}, - {"field": "lifeExp", "cellDataType": "numeric"}, - {"field": "pop", "cellDataType": "numeric"}, - {"field": "gdpPercap", "cellDataType": "euro"}, - ], - ), + vm.Graph( + figure=variable_map(data_frame=gapminder_pos, color="lifeExp", title="Positive Life Expectancy"), + ), + vm.Graph( + figure=variable_map(data_frame=gapminder_neg, color="lifeExp", title="Negative Life Expectancy"), + ), + vm.Graph( + figure=variable_map(data_frame=gapminder_mixed, color="lifeExp", title="Mixed Life Expectancy"), ), ], - controls=[vm.Filter(column="continent")], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/src/vizro/_themes/_templates/common_values.py b/vizro-core/src/vizro/_themes/_templates/common_values.py index 2bfb1ad22..5bad33af2 100644 --- a/vizro-core/src/vizro/_themes/_templates/common_values.py +++ b/vizro-core/src/vizro/_themes/_templates/common_values.py @@ -48,6 +48,7 @@ def create_template_common(): margin_b=64, margin_pad=0, margin_autoexpand=True, + coloraxis_autocolorscale=False, # Set to False as otherwise users cannot customize via `color_continous_scale` coloraxis_colorbar_outlinewidth=0, coloraxis_colorbar_thickness=20, coloraxis_colorbar_showticklabels=True, diff --git a/vizro-core/src/vizro/_themes/_templates/template_dark.py b/vizro-core/src/vizro/_themes/_templates/template_dark.py index 25d20d79f..9a694efd4 100644 --- a/vizro-core/src/vizro/_themes/_templates/template_dark.py +++ b/vizro-core/src/vizro/_themes/_templates/template_dark.py @@ -42,8 +42,11 @@ def create_template_dark() -> Template: template_dark["layout"]["coloraxis"]["colorbar"]["tickcolor"] = COLORS["WHITE_30"] template_dark["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = COLORS["WHITE_55"] template_dark["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = COLORS["WHITE_55"] - template_dark["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"][::-1] - template_dark["layout"]["colorscale"]["sequential"] = COLORS["DIVERGING_RED_CYAN"] # default for continuous + # Diverging, sequential and sequentialminus colorscale will only be applied automatically if + # `coloraxis_autocolorscale=True`. Otherwise, they have no effect, and the default for continuous color scales + # will be the color sequence applied to ["colorscale"]["sequential"]. + template_dark["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"] + template_dark["layout"]["colorscale"]["sequential"] = COLORS["SEQUENTIAL_CYAN"] template_dark["layout"]["colorscale"]["sequentialminus"] = COLORS["SEQUENTIAL_RED"][::-1] template_dark["layout"]["colorway"] = COLORS["DISCRETE_10"] diff --git a/vizro-core/src/vizro/_themes/_templates/template_light.py b/vizro-core/src/vizro/_themes/_templates/template_light.py index 805979b42..664bf151a 100644 --- a/vizro-core/src/vizro/_themes/_templates/template_light.py +++ b/vizro-core/src/vizro/_themes/_templates/template_light.py @@ -43,8 +43,8 @@ def create_template_light() -> Template: template_light["layout"]["coloraxis"]["colorbar"]["tickcolor"] = COLORS["BLACK_30"] template_light["layout"]["coloraxis"]["colorbar"]["tickfont"]["color"] = COLORS["BLACK_55"] template_light["layout"]["coloraxis"]["colorbar"]["title"]["font"]["color"] = COLORS["BLACK_55"] - template_light["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"][::-1] - template_light["layout"]["colorscale"]["sequential"] = COLORS["DIVERGING_RED_CYAN"] # default for continuous + template_light["layout"]["colorscale"]["diverging"] = COLORS["DIVERGING_RED_CYAN"] + template_light["layout"]["colorscale"]["sequential"] = COLORS["SEQUENTIAL_CYAN"] template_light["layout"]["colorscale"]["sequentialminus"] = COLORS["SEQUENTIAL_RED"][::-1] template_light["layout"]["colorway"] = COLORS["DISCRETE_10"] diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css index 6ec9d3a56..1541c8586 100644 --- a/vizro-core/src/vizro/static/css/accordion.css +++ b/vizro-core/src/vizro/static/css/accordion.css @@ -114,3 +114,9 @@ .accordion-body .accordion-item-link:last-child { margin-bottom: var(--spacing-03); } + +.nav-link:focus-visible { + border: none; + box-shadow: none; + outline: none; +}