diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py index 8cebd9d33..c8d51f737 100644 --- a/vizro-core/examples/scratch_dev/app.py +++ b/vizro-core/examples/scratch_dev/app.py @@ -1,109 +1,33 @@ -"""Dev app to try things out.""" - +import plotly.graph_objs as go import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro -from vizro.figures import kpi_card from vizro.models.types import capture -from vizro.tables import dash_ag_grid, dash_data_table - -df = px.data.iris() - - -# Graph -@capture("graph") -def my_graph_figure(data_frame, **kwargs): - """My custom figure.""" - return px.scatter(data_frame, **kwargs) - - -class MyGraph(vm.Graph): - """My custom class.""" - - def build(self): - """Custom build.""" - graph_build_obj = super().build() - # DO SOMETHING - return graph_build_obj - - -# Table -@capture("table") -def my_table_figure(data_frame, **kwargs): - """My custom figure.""" - return dash_data_table(data_frame, **kwargs)() - - -class MyTable(vm.Table): - """My custom class.""" - pass +import plotly.io as pio +pio.templates["vizro_dark"]["layout"]["colorway"] = ["red"] +pio.templates["vizro_light"]["layout"]["colorway"] = ["yellow"] -# AgGrid -@capture("ag_grid") -def my_ag_grid_figure(data_frame, **kwargs): - """My custom figure.""" - return dash_ag_grid(data_frame, **kwargs)() - - -class MyAgGrid(vm.AgGrid): - """My custom class.""" - - pass - - -# Figure -@capture("figure") -def my_kpi_card_figure(data_frame, **kwargs): - """My custom figure.""" - return kpi_card(data_frame, **kwargs)() - - -class MyFigure(vm.Figure): - """My custom class.""" - - pass - +df = px.data.iris() -# Action -@capture("action") -def my_action_function(): - """My custom action.""" - pass +@capture("graph") +def my_graph_figure_px(data_frame): + return px.scatter(data_frame, x="sepal_width", y="sepal_length") -class MyAction(vm.Action): - """My custom class.""" - pass +@capture("graph") +def my_graph_figure_go(data_frame): + return go.Figure(go.Scatter(x=data_frame["sepal_width"], y=data_frame["sepal_length"])) page = vm.Page( title="Test", - layout=vm.Layout( - grid=[[0, 1], [2, 3], [4, 5], [6, 7], [8, -1]], - col_gap="50px", - row_gap="50px", - ), components=[ - # Graph - MyGraph(figure=px.scatter(df, x="sepal_width", y="sepal_length", title="My Graph")), - MyGraph(figure=my_graph_figure(df, x="sepal_width", y="sepal_length", title="My Graph Custom Figure")), - # Table - MyTable(figure=dash_data_table(df), title="My Table"), - MyTable(figure=my_table_figure(df), title="My Table Custom Figure"), - # AgGrid - MyAgGrid(figure=dash_ag_grid(df), title="My AgGrid"), - MyAgGrid(figure=my_ag_grid_figure(df), title="My AgGrid Custom Figure"), - # Figure - MyFigure(figure=kpi_card(df, value_column="sepal_width", title="KPI Card")), - MyFigure(figure=my_kpi_card_figure(df, value_column="sepal_width", title="KPI Card Custom Figure")), - # Action - MyGraph( - figure=my_graph_figure(df, x="sepal_width", y="sepal_length", title="My Graph Custom Figure"), - actions=[MyAction(function=my_action_function())], - ), + vm.Graph(figure=px.scatter(df, x="sepal_width", y="sepal_length")), + vm.Graph(figure=my_graph_figure_px(df)), + vm.Graph(figure=my_graph_figure_go(df)), ], controls=[vm.Filter(column="species")], ) diff --git a/vizro-core/src/vizro/models/_dashboard.py b/vizro-core/src/vizro/models/_dashboard.py index 58863c1fd..9284ee1bc 100644 --- a/vizro-core/src/vizro/models/_dashboard.py +++ b/vizro-core/src/vizro/models/_dashboard.py @@ -5,6 +5,7 @@ from pathlib import Path from typing import TYPE_CHECKING, List, Literal, TypedDict +import plotly.io as pio import dash import dash_bootstrap_components as dbc import dash_mantine_components as dmc @@ -154,7 +155,9 @@ def build(self): id="dashboard-container", children=[ html.Div(id="vizro_version", children=vizro.__version__, hidden=True), - dcc.Store(id="vizro_themes", data={"dark": themes.dark, "light": themes.light}), + dcc.Store( + id="vizro_themes", data={"dark": pio.templates["vizro_dark"], "light": pio.templates["vizro_light"]} + ), ActionLoop._create_app_callbacks(), dash.page_container, ], diff --git a/vizro-core/tests/unit/vizro/models/test_dashboard.py b/vizro-core/tests/unit/vizro/models/test_dashboard.py index d7b286553..f3291e5a6 100644 --- a/vizro-core/tests/unit/vizro/models/test_dashboard.py +++ b/vizro-core/tests/unit/vizro/models/test_dashboard.py @@ -1,5 +1,5 @@ from pathlib import Path - +import plotly.io as pio import dash import dash_bootstrap_components as dbc import pytest @@ -231,7 +231,9 @@ def test_dashboard_build(self, vizro_app, page_1, page_2): id="dashboard-container", children=[ html.Div(id="vizro_version", children=vizro.__version__, hidden=True), - dcc.Store(id="vizro_themes", data={"dark": themes.dark, "light": themes.light}), + dcc.Store( + id="vizro_themes", data={"dark": pio.templates["vizro_dark"], "light": pio.templates["vizro_light"]} + ), ActionLoop._create_app_callbacks(), dash.page_container, ],