# Custom Widgets and Tabs

You can add a new **Widget**, e.g. to visualize a metric that Evidently does not provide. You can also create a **Tab** by combining existing and custom widgets to get a new Dashboard and HTML report.

**Example 1 (California Housing, PSI metric for Data Drift).** Refer to it to reproduce and explore the implementation of a custom Widget and a Tab on your own:

{% embed url="<https://colab.research.google.com/drive/1ROOpbUD7cQ9al9yQ3wJ_yMSzEdCVFsDT?usp=sharing>" %}

Below is a step-by-step guide with a simplified example.

### Create your own Widget

To create a new Widget, you should create a class derived from our base class: <https://github.com/evidentlyai/evidently/blob/main/src/evidently/dashboard/widgets/widget.py>

Then you need to modify the **calculate** method. It takes as arguments `reference` data, `current` data, and `column_mapping`. Your Widget can use any information from these variables.

Here is an instruction on how to create a simple Widget with the information about the target distribution on reference and current data.

**Example 2 (California Housing, Simple Widget and Tab):**

{% embed url="<https://colab.research.google.com/drive/1d8kmGjlOsr5cr_Wl9In-CZwxyO5G4bRE?usp=sharing>" %}

1. **We make a prototype of our Widget in Jupyter Notebook.** Using Plotly, we create a graph that we want to see in the Dashboard.

```python
import plotly.figure_factory as ff
hist_data = [ref_data[target], prod_data[target]]
group_labels = ['reference', 'production']
colors = ['#333F44', '#37AA9C'] 
fig = ff.create_distplot(hist_data, group_labels, colors=colors, show_hist=False, show_rug=False)
fig.update_layout(     
    xaxis=dict(
        showticklabels=True
    ),
    yaxis=dict(
        showticklabels=True
    ),
    legend=dict(
        orientation="v",
        yanchor="top",
        y=1.02,
        xanchor="right",
        x=1
    ),
)
```

![](/files/pEWAAMR8l4ItRYJ72NDp)

**2. Now we need to write a class for our Widget**.

Create a new Python file. Copy the code from <https://github.com/evidentlyai/evidently/blob/main/src/evidently/dashboard/widgets/reg_pred_and_actual_in_time_widget.py> - we will use it as starting point and edit to create a custom implementation.

We start from imports. We change the Plotly import, remove analyzer import, and the default colors:

![](/files/gXWlJ0l11hNaAXe49GDA)

Then, we remove the arguments that we don’t need from the `init` function. We remove the `analyzers` function because we don't use its result in the custom Widget.

![](/files/0VZCkYYadRHwm1PxWFXL)

Next, we remove everything from the **calculate** method until the JSON and return section. We then paste the code for the custom plot we created earlier from the Jupyter notebook.

**Tip:** don't forget to replace the DataFrame names!

![](/files/U9WpJ9QhqGpd27rFaXLp)

Finally, we fix the JSON conversion and return sections:

![](/files/IGyUUFMBqaURgVvKHk93)

That’s it!

Now you can put this file from where you can import the module, and paste it into the Evidently tab like this:

```
from my_widgets.target_distribution_widget import TargetDistributionWidget
dashboard = Dashboard(tabs=[RegressionPerformanceTab(include_widgets=[
    'Current: Predicted vs Actual',
    TargetDistributionWidget('Target distribution')
])])
dashboard.calculate(ref_data.sample(1000, random_state=0), 
                    prod_data.sample(1000, random_state=0), 
                    column_mapping=column_mapping)
dashboard.show()
```

![](/files/XGzO5RVekhbTKsAwWWPZ)

### Create your own Tab

Creating a custom Tab is even easier. You need to create a class derived from the base class: <https://github.com/evidentlyai/evidently/blob/main/src/evidently/dashboard/tabs/base_tab.py>

Again, let's take an existing Evidently tab as an example and change it.

Just import the custom widgets and list them in the attribute "**widgets"**. You can specify the "**verbose"** parameter to have an option to adjust the tab composition.

![](/files/MSUyR5rmGwg5OHpcj0BQ)

To generate the report, run these commands:

```
from my_tabs.my_simple_tab import MySimpleTab
dashboard = Dashboard(tabs=[MySimpleTab()])
dashboard.calculate(ref_data.sample(1000, random_state=0), 
                    prod_data.sample(1000, random_state=0), 
                    column_mapping=column_mapping)
                    
dashboard.show()
```

![](/files/XzP47eYmQTmqDY5jqNWe)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-old.evidentlyai.com/v0.1.57/user-guide/customization/add-a-custom-widget-or-tab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.