[Docs] Add summary page for extensions

vizro-core/docs/pages/user-guides/extensions.md

@@ -0,0 +1,116 @@
+# How to extend and customize Vizro dashboards
+
+Vizro provides the ability to extensively customize a wide range of functioanlity,
+and go far beyond the default Vizro capabilities - to avoid beining limited by any low-code configuration:
+
+1) **Vizro customizations** - can be used to seamlessly extend the default functionality of Vizro
+by allowing users to quickly create Python functions for customizing charts, tables, dashboard components
+callbacks in the form of actions, and reactive HTML components - then easily plug them directly
+into the existing Vizro dashboard configuration
+
+
+2) **Dash customizations** - it is possible to create custom Dash callbacks and add them
+directly to any Vizro dashboard - allowing users to go beneath the Vizro layer to control Dash directly
+
+
+3) **React.js customizations** - it is possible to create custom React.js components and add them
+directly to any Vizro dashboard - allowing users to go beneath both the Vizro and Dash layers to control React.js directly
+
+
+This ability for extensive customization combines the ease and simplicity of Vizro configurations,
+with the power go beyond that configuration and extend the dashboard functionality almost infinitely -
+combining low-code and high-code approaches to provide the best of both worlds
+
+
+## 1) Vizro customizations
+
+Vizro custom functions can be used to seamlessly extend the default functionality of Vizro
+by allowing users to quickly create Python functions for customizing charts, tables, dashboard components
+callbacks in the form of actions, and reactive HTML components - then easily plug them directly
+into the existing Vizro dashboard configuration
+
+- ### [Custom charts](custom-charts.md)
+
+    It is possible to create custom chart functions in Vizro by wrapping Plotly chart code inside a
+    Vizro chart function wrapper, and then use them easily directly inside Vizro dashboard configuration.
+    This allows the creation of things like plotly.graph_objects charts with multiple traces, or plotly_express
+    charts with update_layout customizations
+
+
+- ### [Custom tables](custom-tables.md)
+
+    In cases where the available arguments for the [`dash_ag_grid`][vizro.tables.dash_ag_grid] or [`dash_data_table`][vizro.tables.dash_data_table] models are not sufficient,
+    you can create a custom Dash AG Grid or Dash DataTable.
+
+
+- ### [Custom components](custom-components.md)
+
+    In general, you can create a custom component based on any dash-compatible component (for example, [dash-core-components](https://dash.plotly.com/dash-core-components),
+    [dash-bootstrap-components](https://dash-bootstrap-components.opensource.faculty.ai/), [dash-html-components](https://github.com/plotly/dash/tree/dev/components/dash-html-components)).
+
+    All our components are based on `Dash`, and they are shipped with a set of sensible defaults that can be modified. If you would like to overwrite one of those defaults,
+    or if you would like to use extra `args` or `kwargs` of those components, then this is the correct way to include those. You can use any existing attribute of any underlying [Dash component](https://dash.plotly.com/#open-source-component-libraries) with this method.
+
+
+- ### [Custom actions](custom-actions.md)
+
+    If you want to use the [`Action`][vizro.models.Action] model to perform functions that are not available in the [pre-defined action functions][vizro.actions], you can create your own custom action.
+    Like other [actions](actions.md), custom actions could also be added as an element inside the [actions chain](actions.md#chain-actions), and it can be triggered with one of many dashboard components.
+
+
+- ### [Custom figures](custom-figures.md)
+
+    Custom figures are useful when you need a component that reacts to
+    [filter](filters.md) and [parameter](parameters.md) controls.
+
+    The [`Figure`][vizro.models.Figure] model accepts the `figure` argument, where you can enter _any_ custom figure function
+    as explained in the [user guide on figures](figure.md).
+
+
+## 2) Dash customizations
+
+Since Vizro is built using Dash, it is possible to use Dash callbacks directly in any Vizro dashboard -
+allowing users to go beneath the Vizro layer to control Dash directly,
+which is especially useful when working with callbacks
+
+Here is a very simple example showing a Dash callback within Vizro,
+enabling an interaction between data points in a scatter plot and the content of a text card:
+
+!!! example "Dash callback example"
+    === "app.py"
+        ```{.python pycafe-link}
+        from dash import callback, Input, Output
+        import vizro.models as vm
+        import vizro.plotly.express as px
+        from vizro import Vizro
+
+        @callback(
+            Output("card_id", "children"),
+            Input("source_chart", "clickData")
+        )
+        def update_card(click_data):
+            if click_data is None:
+                return "Click on the graph to select a data point."
+            return f"Clicked species: '{click_data['points'][0]['customdata'][0]}'"
+
+        page = vm.Page(
+            title="Example: Dash callback within Vizro",
+            components=[
+                vm.Graph(id="source_chart",
+                         figure=px.scatter(px.data.iris(), x="sepal_width", y="sepal_length", color="species", custom_data=["species"])),
+                vm.Card(id="card_id",
+                        text="Click on the graph to apply filter interaction."),
+            ]
+        )
+
+        dashboard = vm.Dashboard(pages=[page])
+
+        Vizro().build(dashboard).run()
+        ```
+
+## 3) React.js customizations
+
+It is possible to create custom React.js components and add them
+directly to any Vizro dashboard - allowing users to go beneath both the Vizro and Dash layers to control React.js directly
+
+For more information view the documentation on [using React.js components with Dash](https://dash.plotly.com/plugins)

vizro-core/mkdocs.yml

@@ -35,6 +35,7 @@ nav:
           - Data: pages/user-guides/data.md
           - Kedro Data Catalog: pages/user-guides/kedro-data-catalog.md
       - EXTENSIONS:
+          - Overview: pages/user-guides/extensions.md
           - Custom charts: pages/user-guides/custom-charts.md
           - Custom tables: pages/user-guides/custom-tables.md
           - Custom components: pages/user-guides/custom-components.md