Table filter interactions (#119)

vizro-core/changelog.d/20231102_145448_petar_pejovic_table_filter_interaction.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

@@ -105,24 +105,25 @@ a result, when a dashboard user now clicks the button, all data on the page will
 
 ### Filter data by clicking on chart
 
-To enable filtering when clicking on data in a (source) chart, you can add the [`filter_interaction`][vizro.actions.filter_interaction] action function to the [`Graph`][vizro.models.Graph] component. The [`filter_interaction`][vizro.actions.filter_interaction] is currently configured to be triggered on click only.
+To enable filtering when clicking on data in a (source) chart, you can add the [`filter_interaction`][vizro.actions.filter_interaction] action function to the [`Graph`][vizro.models.Graph] or [`Table`][vizro.models.Table] component. The [`filter_interaction`][vizro.actions.filter_interaction] is currently configured to be triggered on click only.
 
 To configure this chart interaction follow the steps below:
 
-1. Add the action function to the source [`Graph`][vizro.models.Graph] and a list of IDs of the target charts into `targets`
+1. Add the action function to the source [`Graph`][vizro.models.Graph] or [`Table`][vizro.models.Table] component and a list of IDs of the target charts into `targets`.
 ```py
 actions=[vm.Action(function=filter_interaction(targets=["scatter_relation_2007"]))]
 ```
-2. Enter the filter columns in the `custom_data` argument of the underlying source chart `function`
+2. If the source chart is [`Graph`][vizro.models.Graph], enter the filter columns in the `custom_data` argument of the underlying source chart `function`.
 ```py
 Graph(figure=px.scatter(..., custom_data=["continent"]))
 ```
-    Selecting a data point with a corresponding value of "Africa" in the continent column will result in filtering the dataset of target charts to show only entries with "Africa" in the continent column. The same applies when providing multiple columns in `custom_data`.
+Selecting a data point with a corresponding value of "Africa" in the continent column will result in filtering the dataset of target charts to show only entries with "Africa" in the continent column. The same applies when providing multiple columns in `custom_data`.
 
 !!! tip
     - You can reset your chart interaction filters by refreshing the page
     - You can create a "self-interaction" by providing the source chart id as its own `target`
 
+Here is an example of how to configure a chart interaction when the source is a [`Graph`][vizro.models.Graph] component.
 
 !!! example "`filter_interaction`"
     === "app.py"
@@ -199,16 +200,94 @@ Graph(figure=px.scatter(..., custom_data=["continent"]))
                 x: gdpPercap
                 y: lifeExp
                 size: pop
-              controls:
-                - column: continent
-                  type: filter
+            controls:
+              - column: continent
+                type: filter
             title: Filter interaction
         ```
     === "Result"
         [![Graph2]][Graph2]
 
     [Graph2]: ../../assets/user_guides/actions/actions_filter_interaction.png
 
+Here is an example of how to configure a chart interaction when the source is a [`Table`][vizro.models.Table] component.
+
+!!! example "`filter_interaction`"
+    === "app.py"
+        ```py
+        import vizro.models as vm
+        import vizro.plotly.express as px
+        from vizro import Vizro
+        from vizro.actions import filter_interaction
+        from vizro.tables import dash_data_table
+
+        df_gapminder = px.data.gapminder().query("year == 2007")
+
+        dashboard = vm.Dashboard(
+            pages=[
+                vm.Page(
+                    title="Filter interaction",
+                    components=[
+                        vm.Table(
+                            figure=dash_data_table(id="dash_datatable_id", data_frame=df_gapminder),
+                            actions=[
+                                vm.Action(function=filter_interaction(targets=["scatter_relation_2007"]))
+                            ],
+                        ),
+                        vm.Graph(
+                            id="scatter_relation_2007",
+                            figure=px.scatter(
+                                df_gapminder,
+                                x="gdpPercap",
+                                y="lifeExp",
+                                size="pop",
+                                color="continent",
+                            ),
+                        ),
+                    ],
+                    controls=[vm.Filter(column='continent')]
+                ),
+            ]
+        )
+
+        if __name__ == "__main__":
+            Vizro().build(dashboard).run()
+        ```
+    === "app.yaml"
+        ```yaml
+        # Still requires a .py to register data connector in Data Manager and parse yaml configuration
+        # See from_yaml example
+        pages:
+          - components:
+            - type: table
+              figure:
+                _target_: dash_data_table
+                data_frame: gapminder_2007
+                id: dash_datatable_id
+              actions:
+               - function:
+                    _target_: filter_interaction
+                    targets:
+                      - scatter_relation_2007
+            - type: graph
+              id: scatter_relation_2007
+              figure:
+                _target_: scatter
+                data_frame: gapminder_2007
+                color: continent
+                x: gdpPercap
+                y: lifeExp
+                size: pop
+            controls:
+              - column: continent
+                type: filter
+            title: Filter interaction
+        ```
+    === "Result"
+        [![Table]][Table]
+
+    [Table]: ../../assets/user_guides/actions/actions_table_filter_interaction.png
+
 ## Predefined actions customization
 Many predefined actions are customizable which helps to achieve more specific desired goal. For specific options, please
 refer to the [API reference][vizro.actions] on this topic.

vizro-core/examples/default/app.py

@@ -7,6 +7,7 @@
 import vizro.plotly.express as px
 from vizro import Vizro
 from vizro.actions import export_data, filter_interaction
+from vizro.tables import dash_data_table
 
 
 def retrieve_avg_continent_data():
@@ -215,7 +216,7 @@ def create_relation_analysis():
             vm.Card(
                 text="""
                         #### Last updated
-                        July, 2023
+                        November, 2023
                     """
             ),
             vm.Graph(
@@ -420,45 +421,43 @@ def create_country_analysis():
 
     page_country = vm.Page(
         title="Country Analysis",
-        layout=vm.Layout(grid=[[0, 0, 0, 1, 1, 1]] * 7 + [[2, 2, 2, 2, 2, 2]]),
         components=[
-            vm.Graph(
-                id="bar_country",
-                figure=px.bar(
-                    df_gapminder,
-                    x="year",
-                    y="pop",
-                    color="data",
-                    barmode="group",
-                    labels={"year": "Year", "data": "Data", "pop": "Population"},
-                    color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
+            vm.Table(
+                id="table_country",
+                title="Table Country",
+                figure=dash_data_table(
+                    id="dash_data_table_country",
+                    data_frame=px.data.gapminder(),
                 ),
+                actions=[vm.Action(function=filter_interaction(targets=["line_country"]))],
             ),
             vm.Graph(
                 id="line_country",
                 figure=px.line(
                     df_gapminder,
+                    title="Line Country",
                     x="year",
                     y="gdpPercap",
                     color="data",
                     labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"},
                     color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
                     markers=True,
+                    hover_name="country",
                 ),
             ),
             vm.Button(
                 text="Export data",
                 actions=[
                     vm.Action(
                         function=export_data(
-                            targets=["bar_country"],
+                            targets=["line_country"],
                         )
                     ),
                 ],
             ),
         ],
         controls=[
-            vm.Filter(column="country", selector=vm.Dropdown(value="India", multi=False, title="Select country")),
+            vm.Filter(column="continent", selector=vm.Dropdown(value="Europe", multi=False, title="Select continent")),
             vm.Filter(column="year", selector=vm.RangeSlider(title="Select timeframe", step=1, marks=None)),
         ],
     )

vizro-core/examples/from_dict/app.py

@@ -8,6 +8,7 @@
 from vizro.actions import export_data, filter_interaction
 from vizro.managers import data_manager
 from vizro.models import Dashboard
+from vizro.tables import dash_data_table
 
 
 def retrieve_gapminder():
@@ -254,7 +255,7 @@ def retrieve_avg_gapminder_year(year: int):
             "type": "card",
             "text": """
                     #### Last updated
-                    July, 2023
+                    November, 2023
              """,
         },
         {
@@ -464,48 +465,48 @@ def retrieve_avg_gapminder_year(year: int):
 
 page_country = {
     "title": "Country Analysis",
-    "layout": {"grid": [[0, 0, 0, 1, 1, 1]] * 7 + [[2, 2, 2, 2, 2, 2]]},
     "components": [
         {
-            "type": "graph",
-            "id": "bar_country",
-            "figure": px.bar(
-                "gapminder_country_analysis",
-                x="year",
-                y="pop",
-                color="data",
-                barmode="group",
-                labels={"year": "Year", "data": "Data", "pop": "Population"},
-                color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
+            "type": "table",
+            "id": "table_country",
+            "title": "Table Country",
+            "figure": dash_data_table(
+                id="dash_data_table_country",
+                data_frame="gapminder",
             ),
+            "actions": [
+                {"function": filter_interaction(targets=["line_country"])},
+            ],
         },
         {
             "type": "graph",
             "id": "line_country",
             "figure": px.line(
                 "gapminder_country_analysis",
+                title="Line Country",
                 x="year",
                 y="gdpPercap",
                 color="data",
                 labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"},
                 color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
                 markers=True,
+                hover_name="country",
             ),
         },
         {
             "type": "button",
             "id": "export_data_button",
             "text": "Export data",
             "actions": [
-                {"function": export_data(targets=["scatter_relation_2007"])},
+                {"function": export_data(targets=["line_country"])},
             ],
         },
     ],
     "controls": [
         {
             "type": "filter",
-            "column": "country",
-            "selector": {"type": "dropdown", "title": "Select country", "multi": False, "value": "India"},
+            "column": "continent",
+            "selector": {"type": "dropdown", "title": "Select continent", "multi": False, "value": "Europe"},
         },
         {
             "type": "filter",