[Bug] Change default continuous color scale to SEQUENTIAL_CYAN (#407)

vizro-core/changelog.d/20240405_135655_huong_li_nguyen_change_theme_default.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Changed
+
+- Change default continuous color scale to `SEQUENTIAL_CYAN`. ([#407](https://github.com/mckinsey/vizro/pull/407))
+
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

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])
 

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,

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"]
 

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"]
 

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;
+}