diff --git a/vizro-core/docs/pages/tutorials/explore-components.md b/vizro-core/docs/pages/tutorials/explore-components.md index 18c9de56a..fb69c4a34 100644 --- a/vizro-core/docs/pages/tutorials/explore-components.md +++ b/vizro-core/docs/pages/tutorials/explore-components.md @@ -459,11 +459,10 @@ You can apply selectors to configure [`Filters`][vizro.models.Filter] and [`Para - [`Slider`][vizro.models.Slider] ## 4. The final touches -Each page is added to the dashboard using the following line of code: `vm.Dashboard(pages=[first_page, second_page])`. -This ensures that all the pages are accessible. -By default, a navigation panel is added on the left side to switch between the two pages. +Each page is added to the dashboard using the following line of code: `vm.Dashboard(pages=[first_page, second_page])`. This ensures that all the pages are accessible. +By default, a navigation panel is added on the left side to switch between the two pages. !!! example "Final dashboard" === "Code" @@ -572,7 +571,6 @@ Vizro doesn't end here, and we only covered the key features, but there is still - How to use [Actions](../user-guides/actions.md) for example, for chart interaction or custom controls. - How to create dashboards from `yaml`, `dict` or `json` following the [dashboard guide](../user-guides/dashboard.md). -[finalpage]: ../../assets/tutorials/dashboard/dashboard4.png [finalpage1]: ../../assets/tutorials/dashboard/dashboard2.png [finalpage2]: ../../assets/tutorials/dashboard/dashboard3.png [firstpage1]: ../../assets/tutorials/dashboard/dashboard21.png diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py index 881961dab..403e2bd0e 100644 --- a/vizro-core/examples/scratch_dev/app.py +++ b/vizro-core/examples/scratch_dev/app.py @@ -6,8 +6,7 @@ df = px.data.gapminder() gapminder_data = ( - df.groupby(by=["continent", "year"]). - agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index() + df.groupby(by=["continent", "year"]).agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index() ) first_page = vm.Page( title="First Page", @@ -22,14 +21,23 @@ ), vm.Graph( id="box_cont", - figure=px.box(gapminder_data, x="continent", y="lifeExp", color="continent", - labels={"lifeExp": "Life Expectancy", "continent": "Continent"}), + figure=px.box( + gapminder_data, + x="continent", + y="lifeExp", + color="continent", + labels={"lifeExp": "Life Expectancy", "continent": "Continent"}, + ), ), vm.Graph( id="line_gdp", - figure=px.line(gapminder_data, x="year", y="gdpPercap", color="continent", - labels={"year": "Year", "continent": "Continent", - "gdpPercap": "GDP Per Cap"}), + figure=px.line( + gapminder_data, + x="year", + y="gdpPercap", + color="continent", + labels={"year": "Year", "continent": "Continent", "gdpPercap": "GDP Per Cap"}, + ), ), ], controls=[ @@ -43,27 +51,30 @@ components=[ vm.Graph( id="scatter_iris", - figure=px.scatter(iris_data, x="sepal_width", y="sepal_length", color="species", - color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"}, - labels={"sepal_width": "Sepal Width", "sepal_length": "Sepal Length", - "species": "Species"}, - ), + figure=px.scatter( + iris_data, + x="sepal_width", + y="sepal_length", + color="species", + color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"}, + labels={"sepal_width": "Sepal Width", "sepal_length": "Sepal Length", "species": "Species"}, + ), ), vm.Graph( id="hist_iris", - figure=px.histogram(iris_data, x="sepal_width", color="species", - color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"}, - labels={"sepal_width": "Sepal Width", "count": "Count", - "species": "Species"}, - ), + figure=px.histogram( + iris_data, + x="sepal_width", + color="species", + color_discrete_map={"setosa": "#00b4ff", "versicolor": "#ff9222"}, + labels={"sepal_width": "Sepal Width", "count": "Count", "species": "Species"}, + ), ), ], controls=[ vm.Parameter( - targets=["scatter_iris.color_discrete_map.virginica", - "hist_iris.color_discrete_map.virginica"], - selector=vm.Dropdown( - options=["#ff5267", "#3949ab"], multi=False, value="#3949ab", title="Color Virginica"), + targets=["scatter_iris.color_discrete_map.virginica", "hist_iris.color_discrete_map.virginica"], + selector=vm.Dropdown(options=["#ff5267", "#3949ab"], multi=False, value="#3949ab", title="Color Virginica"), ), vm.Parameter( targets=["scatter_iris.opacity"],