Skip to main content

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