> ## 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. # Dashboards > Create interactive dashboards with drag-and-drop layouts ## 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 ```python theme={null} # 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 ```python theme={null} # 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: ```python theme={null} # 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: ```python theme={null} # 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 ```python theme={null} # 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 ```python theme={null} # 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 ```python theme={null} # 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 ```python theme={null} # 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 ```python theme={null} # Get all dashboards dashboards = client.dashboards.list_dashboards() # Get a specific dashboard dashboard = client.dashboards.get_dashboard(dashboard_id) ``` ### Deleting dashboards ```python theme={null} # 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: Add weather data to your dashboards. Connect real-time data sources. Customize dashboard appearance and behavior. Explore all dashboard endpoints and options.