Skip to main content

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