> ## Documentation Index
> Fetch the complete documentation index at: https://docs-beta.rebase.energy/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Build reusable visualization components for maps and charts

## Understanding components

Components are the building blocks of your dashboards - they combine datasets, layers, and visualization logic into reusable, interactive elements. Think of them as the building blocks that you can mix and match to create your perfect energy monitoring dashboard.

## Component types

### Map components

The most versatile component type, combining map layers and weather layers into interactive visualizations.

```python theme={null}
# Create a map component with multiple layers
map_component = client.components.create_map(
    name="Wind Farm Overview",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=8,
        map_style="mapbox://styles/mapbox/satellite-v9"
    ),
    layer_ids=[turbine_layer.id, boundary_layer.id, wind_speed_layer.id, temperature_layer.id]
)
```

**Key features:**

* Combine multiple map and weather layers
* Interactive pan and zoom
* Customizable map styles
* Real-time layer property updates

### Timeseries components

Perfect for displaying time-based data with ECharts-powered visualizations.

```python theme={null}
# Create a timeseries component for energy production
timeseries_component = client.components.create_timeseries(
    name="Energy Production Chart",
    title="Wind Farm Production",
    datasets=[production_dataset.id],
    y_axis_label="Production (MW)",
    unit="MW"
)
```

**Key features:**

* Single dataset per component
* ECharts-powered visualizations
* Customizable titles and labels
* Optional custom ECharts configuration

## Advanced component features

### Custom ECharts configuration

Add custom ECharts options to your timeseries components:

```python theme={null}
# Timeseries component with custom ECharts options
timeseries_component = client.components.create_timeseries(
    name="Custom Energy Chart",
    title="Wind Farm Production",
    datasets=[production_dataset.id],
    y_axis_label="Production (MW)",
    unit="MW",
    echarts_options={
        "color": ["#10B981"],
        "grid": {
            "left": "3%",
            "right": "4%",
            "bottom": "3%",
            "containLabel": True
        },
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {
                "type": "cross"
            }
        }
    }
)
```

### Map component with weather layers

Combine map layers with weather data overlays:

```python theme={null}
# Map component with weather integration
map_component = client.components.create_map(
    name="Wind Farm with Weather",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=8,
        map_style="mapbox://styles/mapbox/outdoors-v12"
    ),
    layer_ids=[turbine_layer.id, wind_speed_layer.id]
)
```

## Component management

### Creating components

```python theme={null}
# Create a map component
map_component = client.components.create_map(
    name="My Custom Map",
    config=MapConfig(
        latitude=55.6761,
        longitude=9.5018,
        zoom=6,
        map_style="mapbox://styles/mapbox/outdoors-v12"
    ),
    layer_ids=[layer.id]
)

# Create a timeseries component
timeseries_component = client.components.create_timeseries(
    name="My Custom Chart",
    title="Energy Data",
    datasets=[dataset.id],
    y_axis_label="Value",
    unit="MW"
)
```

### Updating components

```python theme={null}
# Update map component
updated_map = client.components.update_map_component(
    component_id,
    name="Updated Map Name",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=10,
        map_style="mapbox://styles/mapbox/satellite-v9"
    ),
    layer_ids=[new_layer.id, weather_layer.id]
)

# Update timeseries component
updated_timeseries = client.components.update_timeseries(
    component_id,
    name="Updated Chart Name",
    title="Updated Title",
    datasets=[dataset.id],
    y_axis_label="Updated Label",
    unit="MW"
)
```

### Retrieving components

```python theme={null}
# Get all components
components = client.components.list_components()

# Get a specific component
component = client.components.get_component(component_id)
```

### Deleting components

```python theme={null}
# Delete a component (use with caution!)
client.components.delete_component(component_id)
```

## Important Limitations

* **Single dataset per timeseries component**: Only one dataset can be displayed per timeseries component
* **No auto-refresh**: Components do not automatically refresh data
* **No built-in interactions**: Click handlers and custom interactions are not supported
* **Limited chart customization**: Only basic ECharts options are supported
* **No data windows**: Time range filtering is not supported at the component level

## Component templates

### Energy monitoring template

```python theme={null}
# Complete energy monitoring dashboard components
production_chart = client.components.create_timeseries(
    name="Production Overview",
    title="Energy Production",
    datasets=[production_dataset.id],
    y_axis_label="Production (MW)",
    unit="MW"
)

asset_map = client.components.create_map(
    name="Asset Map",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=8,
        map_style="mapbox://styles/mapbox/outdoors-v12"
    ),
    layer_ids=[turbine_layer.id, wind_speed_layer.id]
)
```

### Weather analysis template

```python theme={null}
# Weather analysis component set
wind_analysis = client.components.create_timeseries(
    name="Wind Speed Analysis",
    title="Wind Speed Over Time",
    datasets=[wind_dataset.id],
    y_axis_label="Wind Speed (m/s)",
    unit="m/s"
)

weather_map = client.components.create_map(
    name="Weather Map",
    config=MapConfig(
        latitude=55.2,
        longitude=3.5,
        zoom=6,
        map_style="mapbox://styles/mapbox/satellite-v9"
    ),
    layer_ids=[wind_speed_layer.id, temperature_layer.id]
)
```

## Best practices

### Component design

* Keep components focused on a single purpose
* Use descriptive names and descriptions
* Provide meaningful default configurations
* Include proper error handling

### Performance optimization

* Use appropriate data filtering at the dataset level
* Limit data points in timeseries charts
* Optimize layer rendering for large datasets
* Cache frequently accessed data

### User experience

* Provide clear visual feedback
* Use consistent styling across components
* Add helpful legends and labels
* Test component performance with your actual data

## Next steps

Now that you understand components, learn how to build dashboards:

<CardGroup cols={2}>
  <Card title="Dashboards" icon="grid" href="/essentials/dashboards">
    Combine components into interactive dashboards.
  </Card>

  <Card title="Weather Integration" icon="cloud" href="/essentials/weather-integration">
    Add weather data to your components.
  </Card>

  <Card title="Customization" icon="palette" href="/essentials/customization">
    Customize component appearance and behavior.
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/introduction">
    Explore all component endpoints and options.
  </Card>
</CardGroup>