What is a custom component?

Every report created on the Orbify Platform is made up of components - carefully designed by the Orbify Team - arranged in predefined layouts tailored to specific use cases.

We’ve invested significant effort into building a robust components catalog, ensuring its versatility across a wide range of applications. However, if your needs go beyond the prebuilt components - whether it’s customizations, alternative visualizations, or unique dataset integration - Orbify introduces Custom Components. These allow you to create tailored data visualizations such as charts, layers, or tables using an intuitive Python code editor.

Creating and Testing a Custom Component

Building a Custom Component

Custom components are created through the Custom Component editor in your workspace’s settings.

Here’s how to get started:

Navigate to the Custom Component editor.
Click on the "Create Component" button.
Select the desired component type (see supported types below).
Proceed to the Python code editor view.

To help you get started, a sample code is provided for every component type supported in the Orbify Platform.

Testing and Executing the Component Code

Once your code is ready, you can easily test it in one of your project areas:

Select the project area: Choose a defined project area from your application.
Set the date range: Pick the date range that will serve as the component's parameter.
Run the code: Click "Continue" to execute and preview the results on-screen.

The results will show up in the preview area of the screen.

Custom Component Signature

Every custom component needs to follow a predefined function signature:

def entrypoint(dates: List[date], region: ee.Geometry) -> list[UIComponent]:

Your component will always receive a set of input parameters:

dates: A list of two date objects (start and end date of the selected date range).
region: Contains the project's area geometry.

The output must be a single-element array containing an instance of the UIComponent class.

UIComponent Example

The UIComponent class is the utility for defining data and properties of your custom component. Below is an example:

return [
    UIComponent(
        name="Custom layer",
        component_type="layer",
        data=image,
        options={
            "legend": {
                "legend_type": "basic",
                "items": [
                    {
                        "title": "Legend entry", 
                        "color": "#d3d3d3"
                    }
                ],
            },
        },
    )
]

Supported Types of Custom Components

You can replicate any type of content provided by Orbify's prebuilt components using custom components. Below are the supported types:

Layer (and Layer Group)

Represents a map layer, or a group of layers (used for layers that display e.g. a specific range of dates)

component_type="layer" or component_type="layer_group"

Chart (and Chart group)

Represents a chart, or a group of charts (e.g. to combine multiple separately calculated feature collections into a single chart)

component_type="chart" or component_type="chart_group"

Simple stat

Allows for the output of simple insights or numerical information in a simple statistical box. This type of component also provides the ability to return detail values (right-hand numerical field of the component).

component_type="simple_stat"

Min/max/avg stat

Similar to the simple stat component, but designed to allow to display 3 separate numerical bits of information. Additionally, provides UI utilities for trend visualization.

component_type="layer" or component_type="min_max_avg_stat"

Computed Markdown

Allows creation of a text box, using Markdown to render the desired output, including support for tables, text formatting, and mathematical formulas.

component_type="computed_markdown"

Adding a Custom Component to a Report

Once your custom component is ready, integrating it into a report is straightforward:

Open the component browser in the report editor.
Look for the new category: Custom.
Add your component to the report and configure its placement within the layout.

By following these steps, you can effectively create and incorporate custom components to meet your specific data visualization needs in Orbify.