Merge branch 'main' into feat/get_vizro_ai_customized_output

.pre-commit-config.yaml

@@ -30,7 +30,7 @@ repos:
         pass_filenames: false
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.6
+    rev: v2.3.0
     hooks:
       - id: codespell
         additional_dependencies:
@@ -49,7 +49,7 @@ repos:
         args: [--autofix]
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.4.3
+    rev: v0.4.7
     hooks:
       - id: ruff
         args: [--fix, --exit-non-zero-on-fix]
@@ -79,7 +79,7 @@ repos:
           - pydantic==1.10.14
 
   - repo: https://github.com/gitleaks/gitleaks
-    rev: v8.18.2
+    rev: v8.18.3
     hooks:
       - id: gitleaks
         name: gitleaks (protect)

CODE_OF_CONDUCT.md

@@ -6,7 +6,7 @@ In the interest of fostering an open and welcoming environment, we as
 contributors and maintainers pledge to making participation in our project and
 our community a harassment-free experience for everyone, regardless of age, body
 size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
+level of experience, education, socioeconomic status, nationality, personal
 appearance, race, religion, or sexual identity and orientation.
 
 ## Our Standards

vizro-core/changelog.d/20240531_141147_huong_li_nguyen_creat_kpi_dashboard.md

@@ -0,0 +1,47 @@
+<!--
+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
+
+- Add KPI dashboard to examples. ([#505](https://github.com/mckinsey/vizro/pull/505))
+
+<!--
+### 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/changelog.d/20240603_170316_huong_li_nguyen_remove_pagination_from_aggrid.md

@@ -0,0 +1,47 @@
+<!--
+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
+
+- Turn off `pagination` by default in `dash_ag_grid`. ([#512](https://github.com/mckinsey/vizro/pull/512))
+
+<!--
+### 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/table.md

@@ -52,11 +52,8 @@ Sometimes a parameter may not work because it requires a callback to function. I
         df = px.data.gapminder()
 
         page = vm.Page(
-            title="Example of a Dash AG Grid",
-            components=[
-                vm.AgGrid(title="Dash AG Grid", figure=dash_ag_grid(data_frame=df)),
-            ],
-            controls=[vm.Filter(column="continent")],
+            title="Default Dash AG Grid",
+            components=[vm.AgGrid(figure=dash_ag_grid(data_frame=df))]
         )
         dashboard = vm.Dashboard(pages=[page])
 
@@ -71,18 +68,56 @@ Sometimes a parameter may not work because it requires a callback to function. I
           - figure:
               _target_: dash_ag_grid
               data_frame: gapminder
-            title: Dash AG Grid
             type: ag_grid
-          controls:
-            - column: continent
-              type: filter
-          title: Example of a Dash AG Grid
+          title: Default Dash AG Grid
         ```
     === "Result"
         [![AGGrid]][AGGrid]
 
     [AGGrid]: ../../assets/user_guides/table/aggrid.png
 
+### Enable pagination
+Pagination is a visual alternative to using vertical scroll. It can also improve loading time if you have many rows.
+You can turn it on by setting `dashGridOptions={"pagination": True}`.
+
+!!! example "Basic Dash AG Grid"
+
+    === "app.py"
+        ```py
+        import vizro.models as vm
+        import vizro.plotly.express as px
+        from vizro import Vizro
+        from vizro.tables import dash_ag_grid
+
+        df = px.data.gapminder()
+
+        page = vm.Page(
+            title="Dash AG Grid with pagination",
+            components=[vm.AgGrid(figure=dash_ag_grid(data_frame=df, dashGridOptions={"pagination": True}))]
+        )
+        dashboard = vm.Dashboard(pages=[page])
+
+        Vizro().build(dashboard).run()
+        ```
+    === "app.yaml"
+        ```yaml
+        # Still requires a .py to add data to the data manager and parse YAML configuration
+        # See from_yaml example
+        pages:
+        - components:
+          - figure:
+              _target_: dash_ag_grid
+              data_frame: gapminder
+              dashGridOptions:
+                 pagination: true
+            type: ag_grid
+          title: Dash AG Grid with pagination
+        ```
+    === "Result"
+        [![AGGrid]][AGGrid]
+
+    [AGGrid]: ../../assets/user_guides/table/aggrid-pagination.png
+
 ### Formatting columns
 
 #### Numbers

vizro-core/examples/_dev/app.py

@@ -3,24 +3,29 @@
 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
 
-df = px.data.iris()
+df = px.data.gapminder()
 
-page = vm.Page(
-    title="My first dashboard",
+page_one = vm.Page(
+    title="Dash AG Grid",
+    layout=vm.Layout(grid=[[0, 1]], col_gap="0px"),
     components=[
-        # components consist of vm.Graph or  vm.Table
-        vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
-        vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")),
+        vm.AgGrid(title="Equal Title One", figure=dash_ag_grid(data_frame=df)),
+        vm.Graph(figure=px.box(df, x="continent", y="lifeExp", title="Equal Title One")),
     ],
-    controls=[
-        # controls consist of vm.Filter or vm.Parameter
-        # filter the dataframe (df) of the target graph (histogram), by column sepal_width, using the dropdown
-        vm.Filter(column="sepal_width", selector=vm.Dropdown(), targets=["hist_chart"]),
+)
+
+page_two = vm.Page(
+    title="Dash Data Table",
+    layout=vm.Layout(grid=[[0, 1]]),
+    components=[
+        vm.Table(title="Equal Title One", figure=dash_data_table(data_frame=df)),
+        vm.Graph(figure=px.box(df, x="continent", y="lifeExp", title="Equal Title One")),
     ],
 )
+dashboard = vm.Dashboard(pages=[page_one, page_two])
 
-dashboard = vm.Dashboard(pages=[page])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/examples/_dev/yaml_version/dashboard.yaml

@@ -3,17 +3,10 @@
 pages:
   - components:
       - figure:
-          _target_: line
-          data_frame: df_stocks_long
-          x: date
-          y: value
-          color: stocks
-        type: graph
-    controls:
-      - column: stocks
-        type: filter
-      - column: value
-        type: filter
-      - column: date
-        type: filter
-    title: My first page
+          _target_: dash_ag_grid
+          data_frame: gapminder
+          dashGridOptions:
+            pagination: true
+        title: Dash AG Grid
+        type: ag_grid
+    title: Example of a Dash AG Grid

vizro-core/examples/demo/app.py

@@ -282,7 +282,7 @@ def create_relation_analysis():
             vm.Card(
                 text="""
                     Population, GDP per capita, and life expectancy are interconnected metrics that provide insights
-                    into the socio-economic well-being of a country.
+                    into the socioeconomic well-being of a country.
                     Rapid population growth can strain resources and infrastructure, impacting GDP per capita. Higher
                     GDP per capita often enables better healthcare and improved life expectancy, but other factors such
                     as healthcare quality and social policies also play significant roles.
@@ -300,12 +300,6 @@ def create_relation_analysis():
                     options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis"
                 ),
             ),
-            vm.Parameter(
-                targets=["scatter_relation.y"],
-                selector=vm.Dropdown(
-                    options=["lifeExp", "gdpPercap", "pop"], multi=False, value="lifeExp", title="Choose y-axis"
-                ),
-            ),
             vm.Parameter(
                 targets=["scatter_relation.size"],
                 selector=vm.Dropdown(
@@ -329,7 +323,7 @@ def create_continent_summary():
                     ### Africa
                     ![](assets/images/continents/africa.svg#my-image)
 
-                    Africa, a diverse and expansive continent, faces both challenges and progress in its socio-economic
+                    Africa, a diverse and expansive continent, faces both challenges and progress in its socioeconomic
                     landscape. In 2007, Africa's GDP per capita was approximately $3,000, reflecting relatively slower
                     growth compared to other continents like Oceania and Europe.
 
@@ -362,7 +356,7 @@ def create_continent_summary():
                     and population has been significant, outpacing many other continents. In 2007, it boasted the
                     highest population among all continents, with countries like China and India leading the way.
 
-                    Despite facing various socio-economic challenges, Asia's increasing life expectancy from 46 years
+                    Despite facing various socioeconomic challenges, Asia's increasing life expectancy from 46 years
                     to 70 over the years reflects advancements in healthcare and overall well-being, making it a vital
                     region driving global progress and development.
                 """
@@ -424,12 +418,12 @@ def create_benchmark_analysis():
         ]
     }
     columnsDefs = [
-        {"field": "country"},
-        {"field": "continent"},
-        {"field": "year"},
-        {"field": "lifeExp", "cellDataType": "numeric"},
-        {"field": "gdpPercap", "cellDataType": "dollar", "cellStyle": cellStyle},
-        {"field": "pop"},
+        {"field": "country", "flex": 3},
+        {"field": "continent", "flex": 3},
+        {"field": "year", "flex": 2},
+        {"field": "lifeExp", "cellDataType": "numeric", "flex": 3},
+        {"field": "gdpPercap", "cellDataType": "dollar", "cellStyle": cellStyle, "flex": 3},
+        {"field": "pop", "flex": 3},
     ]
 
     page_country = vm.Page(
@@ -439,7 +433,7 @@ def create_benchmark_analysis():
         components=[
             vm.AgGrid(
                 title="Click on a cell in country column:",
-                figure=dash_ag_grid(data_frame=gapminder, columnDefs=columnsDefs),
+                figure=dash_ag_grid(data_frame=gapminder, columnDefs=columnsDefs, dashGridOptions={"pagination": True}),
                 actions=[vm.Action(function=filter_interaction(targets=["line_country"]))],
             ),
             vm.Graph(