import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.actions import export_data
import pandas as pd
tips = px.data.tips()
gapminder_2007 = px.data.gapminder().query("year == 2007")
stocks = px.data.stocks()
data = vm.Page(
title="Explore Data",
layout=vm.Grid(grid=[[0], [0], [0], [1]]),
components=[
vm.AgGrid(
figure=dash_ag_grid(data_frame=gapminder_2007, dashGridOptions={"pagination": True}),
title="Gapminder Data Insights",
header="""#### An Interactive Exploration of Global Health, Wealth, and Population""",
),
vm.Button(
text="Export data",
actions=[vm.Action(function=export_data())],
),
],
)
graphs = vm.Page(
title="Visualize Data",
layout=vm.Grid(grid=[[0, 1, 2], [3, 4, 5], [6, 7, 8]]),
components=[
vm.Graph(
figure=px.scatter(
gapminder_2007,
x="gdpPercap",
y="lifeExp",
size="pop",
size_max=60,
color="continent",
)
),
vm.Graph(figure=px.box(tips, y="total_bill", x="day", color="day")),
vm.Graph(figure=px.histogram(tips, x="total_bill")),
vm.Graph(
figure=px.bar(
gapminder_2007.query("country.isin(['United States', 'Pakistan', 'India', 'China', 'Indonesia'])"),
x="pop",
y="country",
orientation="h",
)
),
vm.Graph(figure=px.density_heatmap(tips, x="day", y="size", z="tip", histfunc="avg", text_auto="$.2f")),
vm.Graph(figure=px.histogram(tips, x="sex", y="total_bill", color="day")),
vm.Graph(figure=px.pie(tips, values="tip", names="day", hole=0.4)),
vm.Graph(
figure=px.histogram(
tips,
y="day",
x="total_bill",
color="sex",
barmode="group",
orientation="h",
category_orders={"day": ["Thur", "Fri", "Sat", "Sun"]},
)
),
vm.Graph(figure=px.violin(tips, y="total_bill", x="day", color="day", box=True)),
],
)
dashboard = vm.Dashboard(
title="Vizro Demo",
pages=[graphs, data],
navigation=vm.Navigation(
nav_selector=vm.NavBar(
items=[
vm.NavLink(
label="Graphs",
pages=["Visualize Data"],
icon="Bar Chart",
),
vm.NavLink(
label="Table",
pages=["Explore Data"],
icon="Database",
),
]
)
),
)
Vizro().build(dashboard).run()