[Docs] Clarify what chart data will be exported (#525)

vizro-core/changelog.d/20240613_163537_petar_pejovic_explain_exporting_filtered_data_for_tables.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

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

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()