Dashboards

Understanding dashboards

Dashboards are where the magic happens - they combine all your components into beautiful, interactive energy monitoring solutions. With React Grid Layout, you get drag-and-drop functionality and responsive design that make your energy data come alive.

Creating your first dashboard

Basic dashboard setup

# Create a simple dashboard with a map and chart
dashboard = client.dashboards.create_dashboard(
    name="Wind Farm Monitor",
    components=[map_component.id, timeseries_component.id],
    react_grid_layout_config=ReactGridLayoutConfig(
        cols=12,
        row_height=150,
        margin=[10, 10],
        container_padding=[10, 10],
        is_draggable=True,
        is_resizable=True
    )
)

Key configuration properties:

cols: Number of columns in the grid (default: 12)
row_height: Height of each grid row in pixels
margin: Margin between grid items [x, y]
container_padding: Padding around the grid container [x, y]
is_draggable: Whether components can be dragged
is_resizable: Whether components can be resized

Advanced dashboard configuration

# Advanced dashboard with custom grid settings
advanced_dashboard = client.dashboards.create_dashboard(
    name="Energy Operations Center",
    components=[
        header_component.id,
        main_map.id,
        production_chart.id,
        weather_forecast.id,
        status_panel.id
    ],
    react_grid_layout_config=ReactGridLayoutConfig(
        cols=12,
        row_height=120,
        margin=[15, 15],
        container_padding=[20, 20],
        is_draggable=True,
        is_resizable=True,
        auto_size=True,
        use_css_transforms=True
    )
)

Dashboard layouts

Layout management

Layout is managed separately from dashboard creation. After creating a dashboard, its layout is updated through the API when saving the dashboard on the frontend:

# Update dashboard layout (layout data sent in request body)
response = client.dashboards.update_dashboard_layout(
    dashboard_id,
    # Layout data is sent in the request body as JSON:
    # {
    #   "layout": [
    #     {"i": "component-id", "x": 0, "y": 0, "w": 8, "h": 6, ...}
    #   ],
    #   "componentState": {...}  # Optional
    # }
)

Layout properties:

i: Component ID
x, y: Grid position (0-based)
w, h: Width and height in grid units
min_w, min_h: Minimum size constraints
static: Whether the component can be moved

Request body structure: The update method accepts a JSON request body with:

layout: Array of layout objects for each component
componentState: Optional object for component-specific state (layer order, settings, etc.)

Grid-based layouts

The most flexible layout system using CSS Grid:

# 12-column grid layout
layout = [
    # Full-width header
    Layout(i="header", x=0, y=0, w=12, h=1, static=True),
    # Left sidebar
    Layout(i="sidebar", x=0, y=1, w=3, h=10),
    # Main content area
    Layout(i="main_map", x=3, y=1, w=6, h=6),
    Layout(i="chart1", x=3, y=7, w=3, h=4),
    Layout(i="chart2", x=6, y=7, w=3, h=4),
    # Right sidebar
    Layout(i="controls", x=9, y=1, w=3, h=10)
]

Dashboard templates

Energy monitoring template

# Complete energy monitoring dashboard
energy_monitoring_dashboard = client.dashboards.create_dashboard(
    name="Energy Operations Dashboard",
    components=[
        kpi_header.id,
        asset_map.id,
        production_chart.id,
        weather_overlay.id,
        status_panel.id
    ],
    react_grid_layout_config=ReactGridLayoutConfig(
        cols=12,
        row_height=150,
        margin=[10, 10],
        container_padding=[10, 10],
        is_draggable=True,
        is_resizable=True
    )
)

# Update with specific layout (layout data sent in request body)
client.dashboards.update_dashboard_layout(
    energy_monitoring_dashboard.id,
    # Request body:
    # {
    #   "layout": [
    #     {"i": kpi_header.id, "x": 0, "y": 0, "w": 12, "h": 1, "static": True},
    #     {"i": asset_map.id, "x": 0, "y": 1, "w": 8, "h": 8},
    #     {"i": production_chart.id, "x": 8, "y": 1, "w": 4, "h": 4},
    #     {"i": weather_overlay.id, "x": 8, "y": 5, "w": 4, "h": 4, "min_w": 3, "min_h": 3},
    #     {"i": status_panel.id, "x": 0, "y": 9, "w": 12, "h": 2}
    #   ]
    # }
)

Weather analysis template

# Weather-focused dashboard
weather_dashboard = client.dashboards.create_dashboard(
    name="Weather Analysis Dashboard",
    components=[
        weather_map.id,
        wind_speed.id,
        temperature.id,
        wind_rose.id,
        forecast_table.id
    ],
    react_grid_layout_config=ReactGridLayoutConfig(
        cols=12,
        row_height=140,
        margin=[10, 10],
        container_padding=[10, 10],
        is_draggable=True,
        is_resizable=True
    )
)

# Update with weather-specific layout (layout data sent in request body)
client.dashboards.update_dashboard_layout(
    weather_dashboard.id,
    # Request body:
    # {
    #   "layout": [
    #     {"i": weather_map.id, "x": 0, "y": 0, "w": 8, "h": 6},
    #     {"i": wind_speed.id, "x": 8, "y": 0, "w": 4, "h": 3},
    #     {"i": temperature.id, "x": 8, "y": 3, "w": 4, "h": 3},
    #     {"i": wind_rose.id, "x": 0, "y": 6, "w": 4, "h": 4},
    #     {"i": forecast_table.id, "x": 4, "y": 6, "w": 8, "h": 4}
    #   ]
    # }
)

Dashboard management

Creating dashboards

# Create a new dashboard
dashboard = client.dashboards.create_dashboard(
    name="My Custom Dashboard",
    components=[component1.id, component2.id],
    react_grid_layout_config=ReactGridLayoutConfig(
        cols=12,
        row_height=150,
        margin=[10, 10],
        container_padding=[10, 10],
        is_draggable=True,
        is_resizable=True
    )
)

Updating dashboard layout

# Update dashboard layout only (layout data sent in request body)
response = client.dashboards.update_dashboard_layout(
    dashboard_id,
    # Request body:
    # {
    #   "layout": [
    #     {"i": component1.id, "x": 0, "y": 0, "w": 8, "h": 6},
    #     {"i": component2.id, "x": 8, "y": 0, "w": 4, "h": 6}
    #   ],
    #   "componentState": {...}  # Optional component state
    # }
)

Retrieving dashboards

# Get all dashboards
dashboards = client.dashboards.list_dashboards()

# Get a specific dashboard
dashboard = client.dashboards.get_dashboard(dashboard_id)

Deleting dashboards

# Delete a dashboard (use with caution!)
client.dashboards.delete_dashboard(dashboard_id)

Important Limitations

Layout updates separate: Layout is updated via separate endpoint, not during creation
No theme customization: Custom themes and CSS are not supported
No sharing features: Dashboard sharing and embedding are not implemented
No real-time updates: Auto-refresh and real-time updates are not supported
No component interactions: Cross-component communication is not implemented
No responsive breakpoints: Only single layout configuration is supported
No auto-save: Dashboard changes are not automatically saved

Best practices

Layout design

Use a logical grid system (12 columns recommended)
Group related components together
Leave space for future additions
Consider component sizes and proportions

Performance optimization

Limit the number of components per dashboard
Use appropriate component sizes
Optimize data queries and caching
Monitor dashboard load times

User experience

Provide clear component organization
Use consistent component sizing
Consider component relationships
Test dashboard performance with your actual data

Data management

Organize data logically across components
Use appropriate data filtering at the component level
Implement proper error handling
Monitor data quality and freshness

Next steps

Now that you understand dashboards, explore advanced features:

Weather Integration

Add weather data to your dashboards.

Live Data

Connect real-time data sources.

Customization

Customize dashboard appearance and behavior.

API Reference

Explore all dashboard endpoints and options.

Getting started

Core concepts

Advanced features

Understanding dashboards

Creating your first dashboard

Basic dashboard setup

Advanced dashboard configuration

Dashboard layouts

Layout management

Grid-based layouts

Dashboard templates

Energy monitoring template

Weather analysis template

Dashboard management

Creating dashboards

Updating dashboard layout

Retrieving dashboards

Deleting dashboards

Important Limitations

Best practices

Layout design

Performance optimization

User experience

Data management

Next steps

Weather Integration

Live Data

Customization

API Reference

​Understanding dashboards

​Creating your first dashboard

​Basic dashboard setup

​Advanced dashboard configuration

​Dashboard layouts

​Layout management

​Grid-based layouts

​Dashboard templates

​Energy monitoring template

​Weather analysis template

​Dashboard management

​Creating dashboards

​Updating dashboard layout

​Retrieving dashboards

​Deleting dashboards

​Important Limitations

​Best practices

​Layout design

​Performance optimization

​User experience

​Data management

​Next steps

Weather Integration

Live Data

Customization

API Reference

Understanding dashboards

Creating your first dashboard

Basic dashboard setup

Advanced dashboard configuration

Dashboard layouts

Layout management

Grid-based layouts

Dashboard templates

Energy monitoring template

Weather analysis template

Dashboard management

Creating dashboards

Updating dashboard layout

Retrieving dashboards

Deleting dashboards

Important Limitations

Best practices

Layout design

Performance optimization

User experience

Data management

Next steps