Add example

vizro-core/examples/_dev/app.py

@@ -1,54 +1,38 @@
 """Dev app to try things out."""
 
-import pandas as pd
 import vizro.models as vm
-import vizro.plotly.express as px
 from vizro import Vizro
-from vizro.models.types import capture
 
-df_stocks = px.data.stocks(datetimes=True)
-df_stocks_long = pd.melt(
-    df_stocks,
-    id_vars="date",
-    value_vars=["GOOG", "AAPL", "AMZN", "FB", "NFLX", "MSFT"],
-    var_name="stocks",
-    value_name="value",
+page_1 = vm.Page(title="Page 1", components=[vm.Card(text="Placeholder")])
+page_2 = vm.Page(title="Page 2", components=[vm.Card(text="Placeholder")])
+page_3 = vm.Page(title="Page 3", components=[vm.Card(text="Placeholder")])
+page_4 = vm.Page(title="Page 4", components=[vm.Card(text="Placeholder")])
+page_5 = vm.Page(title="Page 5", components=[vm.Card(text="Placeholder")])
+page_6 = vm.Page(title="Page 6", components=[vm.Card(text="Placeholder")])
+page_7 = vm.Page(title="Page 7", components=[vm.Card(text="Placeholder")])
+page_8 = vm.Page(title="Page 8", components=[vm.Card(text="Placeholder")])
+page_9 = vm.Page(title="Page 9", components=[vm.Card(text="Placeholder")])
+page_10 = vm.Page(title="Page 10", components=[vm.Card(text="Placeholder")])
+
+dashboard = vm.Dashboard(
+    pages=[page_1, page_2, page_3, page_4, page_5, page_6, page_7, page_8, page_9, page_10],
+    navigation=vm.Navigation(
+        nav_selector=vm.NavBar(
+            items=[
+                vm.NavLink(label="Page 1", pages=["Page 1"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 2"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 3"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 4"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 5"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 6"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 7"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 8"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 9"], icon="Home"),
+                vm.NavLink(label="Page 1", pages=["Page 10"], icon="Home"),
+            ]
+        )
+    ),
 )
 
-
-@capture("graph")
-def vizro_plot(data_frame, stocks_selected, **kwargs):
-    """Custom chart function."""
-    return px.line(data_frame[data_frame["stocks"].isin(stocks_selected)], **kwargs)
-
-
-df_stocks_long["value"] = df_stocks_long["value"].round(3)
-
-page = vm.Page(
-    title="My first page",
-    components=[
-        vm.Graph(
-            id="my_graph",
-            figure=vizro_plot(
-                data_frame=df_stocks_long,
-                stocks_selected=list(df_stocks_long["stocks"].unique()),
-                x="date",
-                y="value",
-                color="stocks",
-            ),
-        ),
-    ],
-    controls=[
-        vm.Parameter(
-            targets=["my_graph.stocks_selected"],
-            selector=vm.Dropdown(
-                options=[{"label": s, "value": s} for s in df_stocks_long["stocks"].unique()],
-            ),
-        ),
-    ],
-)
-
-dashboard = vm.Dashboard(pages=[page])
-
 if __name__ == "__main__":
     Vizro().build(dashboard).run()