Components

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.

# 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.

# 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:

# 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:

# 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

# 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

# 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

# Get all components
components = client.components.list_components()

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

Deleting components

# 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

# 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

# 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:

Dashboards

Combine components into interactive dashboards.

Weather Integration

Add weather data to your components.

Customization

Customize component appearance and behavior.

API Reference

Explore all component endpoints and options.

Getting started

Core concepts

Advanced features

Understanding components

Component types

Map components

Timeseries components

Advanced component features

Custom ECharts configuration

Map component with weather layers

Component management

Creating components

Updating components

Retrieving components

Deleting components

Important Limitations

Component templates

Energy monitoring template

Weather analysis template

Best practices

Component design

Performance optimization

User experience

Next steps

Dashboards

Weather Integration

Customization

API Reference

​Understanding components

​Component types

​Map components

​Timeseries components

​Advanced component features

​Custom ECharts configuration

​Map component with weather layers

​Component management

​Creating components

​Updating components

​Retrieving components

​Deleting components

​Important Limitations

​Component templates

​Energy monitoring template

​Weather analysis template

​Best practices

​Component design

​Performance optimization

​User experience

​Next steps

Dashboards

Weather Integration

Customization

API Reference

Understanding components

Component types

Map components

Timeseries components

Advanced component features

Custom ECharts configuration

Map component with weather layers

Component management

Creating components

Updating components

Retrieving components

Deleting components

Important Limitations

Component templates

Energy monitoring template

Weather analysis template

Best practices

Component design

Performance optimization

User experience

Next steps