From 4507eb84bc4a16ccaa008234cf983fb1ac646f3b Mon Sep 17 00:00:00 2001 From: Petar Pejovic <108530920+petar-qb@users.noreply.github.com> Date: Fri, 14 Jun 2024 11:54:31 +0200 Subject: [PATCH] [Docs] Clarify what chart data will be exported (#525) --- ...lain_exporting_filtered_data_for_tables.md | 48 +++++++++++++ vizro-core/docs/pages/user-guides/actions.md | 10 +-- vizro-core/examples/_dev/app.py | 70 +++++++++++-------- 3 files changed, 96 insertions(+), 32 deletions(-) create mode 100644 vizro-core/changelog.d/20240613_163537_petar_pejovic_explain_exporting_filtered_data_for_tables.md diff --git a/vizro-core/changelog.d/20240613_163537_petar_pejovic_explain_exporting_filtered_data_for_tables.md b/vizro-core/changelog.d/20240613_163537_petar_pejovic_explain_exporting_filtered_data_for_tables.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240613_163537_petar_pejovic_explain_exporting_filtered_data_for_tables.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/pages/user-guides/actions.md b/vizro-core/docs/pages/user-guides/actions.md index 7b561d337..30b54ec92 100644 --- a/vizro-core/docs/pages/user-guides/actions.md +++ b/vizro-core/docs/pages/user-guides/actions.md @@ -27,10 +27,6 @@ The below sections are guides on how to use pre-defined action functions. To enable downloading data, you can add the [`export_data`][vizro.actions.export_data] action function to the [`Button`][vizro.models.Button] component. Hence, as a result, when a dashboard user now clicks the button, all data on the page will be downloaded. -When data from a [custom chart](custom-charts.md) is exported it is the contents of the `data_frame` input argument that is exported. -Therefore, the exported data will reflect any native filters and parameters, but no transformations to the `data_frame` done inside the chart function. - - !!! example "`export_data`" === "app.py" @@ -104,6 +100,12 @@ Therefore, the exported data will reflect any native filters and parameters, but [Graph]: ../../assets/user_guides/actions/actions_export.png + +!!! note + + Note that exported data only reflects the original dataset and any native data modifications defined with [`vm.Filter`](filters.md), [`vm.Parameter`](data.md/#parametrize-data-loading) or [`filter_interaction`](actions.md/#filter-data-by-clicking-on-chart) action. + Filters from the chart itself, such as ag-grid filters, are not included, and neither are other chart modifications, nor any data transformations in custom charts. + ### Filter data by clicking on chart To enable filtering when clicking on data in a source chart, you can add the diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index cf5bbab6d..82a08fa0b 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -3,49 +3,63 @@ import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro -from vizro.tables import dash_ag_grid, dash_data_table +from vizro.actions import export_data +from vizro.models.types import capture +from vizro.tables import dash_ag_grid -NUMBER_OF_COMPONENTS = 64 - - -def squared_layout(N): - """Util function.""" - import math - - size = math.ceil(math.sqrt(N)) - layout = [[(i * size + j) if (i * size + j) < N else -1 for j in range(size)] for i in range(size)] - return layout +df = px.data.gapminder() +# Vizro filter exporting Page -------------------------------------------- +# Solution based on https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/#export-data page_one = vm.Page( - title="Page 1", - layout=vm.Layout(grid=squared_layout(NUMBER_OF_COMPONENTS), col_gap="0px"), + title="Vizro filters exporting", + layout=vm.Layout(grid=[[0]] * 5 + [[1]]), components=[ - vm.Graph(id=f"{i}_graph", figure=px.box(px.data.gapminder(), x="continent", y="lifeExp", title=f"Graph {i}")) - for i in range(NUMBER_OF_COMPONENTS) + vm.AgGrid(id="ag_grid_1", title="Equal Title One", figure=dash_ag_grid(data_frame=df)), + vm.Button(text="Export data", actions=[vm.Action(function=export_data())]), ], - controls=[vm.Filter(column="continent")], + controls=[vm.Filter(column="continent"), vm.Filter(column="year")], ) +# AgGrid filter exporting Page ------------------------------------------- +# Solution based on https://dash.plotly.com/dash-ag-grid/export-data-csv + + +# More about Vizro Custom Actions -> https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-actions/ +@capture("action") +def ag_grid_data_exporting(): + """Custom Action.""" + return True + + page_two = vm.Page( - title="Page 2", - layout=vm.Layout(grid=[[0, 1], [2, 2]]), + title="AgGrid filters exporting", + layout=vm.Layout(grid=[[0]] * 5 + [[1]]), # grid = [[0], [0], [0], [0], [0], [1]] components=[ - vm.Table( - id="P2_table", title="Data Table", figure=dash_data_table(id="P2_UL_table", data_frame=px.data.gapminder()) - ), vm.AgGrid( - id="P2_aggrid", title="AG Grid", figure=dash_ag_grid(id="P2_UL_aggrid", data_frame=px.data.gapminder()) + id="ag_grid_2", + title="Equal Title One", + figure=dash_ag_grid( + # underlying_ag_grid_2 is the id of the AgGrid component on the client-side. It is used to reference + # it's `exportDataAsCsv` property with the custom action below + id="underlying_ag_grid_2", + data_frame=df, + csvExportParams={ + "fileName": "ag_grid_2.csv", + }, + ), + ), + vm.Button( + id="button_2", + text="Export data", + actions=[vm.Action(function=ag_grid_data_exporting(), outputs=["underlying_ag_grid_2.exportDataAsCsv"])], ), - vm.Graph(id="P2_graph", figure=px.box(px.data.gapminder(), x="continent", y="lifeExp", title="Graph")), ], - controls=[vm.Filter(column="continent")], -) -dashboard = vm.Dashboard( - pages=[page_one, page_two], - # theme="vizro_light" + controls=[vm.Filter(column="continent"), vm.Filter(column="year")], ) +dashboard = vm.Dashboard(pages=[page_one, page_two]) if __name__ == "__main__": Vizro().build(dashboard).run()