Package com.oorian.html.layout

Class DashboardLayout

java.lang.Object
com.oorian.html.Element<DashboardLayout>
com.oorian.html.VisualElement<DashboardLayout>
com.oorian.html.StyledElement<DashboardLayout>
com.oorian.html.layout.PageLayout<DashboardLayout>
com.oorian.html.layout.DashboardLayout
public class DashboardLayout extends PageLayout<DashboardLayout>
A layout for analytics dashboards with a stats bar and widget grid.

DashboardLayout provides a structure optimized for data visualization dashboards, monitoring pages, and analytics interfaces. It features a top area for key metrics/stats and a flexible grid area for charts, tables, and other widgets.

Structure:

 ┌──────────────────────────────────────┐
 │   Stat 1  │  Stat 2  │  Stat 3  │... │  (Stats Bar)
 ├──────────────────────────────────────┤
 │  Widget   │  Widget   │  Widget  │   │
 │───────────┼───────────┼──────────│   │
 │  Widget   │      Large Widget    │   │  (Widget Grid)
 │───────────┼───────────┴──────────│   │
 │  Widget   │  Widget   │  Widget  │   │
 └──────────────────────────────────────┘

Features:

  • Top stats bar for key metrics
  • Flexible widget grid area
  • Optional header for title/actions
  • Scrollable content with fixed header
  • Configurable grid columns and gaps

Usage:


 // Basic dashboard
 DashboardLayout dashboard = new DashboardLayout();
 dashboard.addStat(userCountWidget)
          .addStat(revenueWidget)
          .addStat(ordersWidget)
          .addWidget(salesChart)
          .addWidget(recentOrders)
          .addWidget(topProducts);

 // With header
 DashboardLayout dashboard = new DashboardLayout();
 dashboard.header(titleBar)
          .setWidgetColumns(3)
          .setWidgetGap(24);

 // Full viewport
 dashboard.fillViewport();
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • DashboardLayout

      public DashboardLayout()
      Constructs a DashboardLayout with default configuration.

  • Method Details

    • initialize

      protected void initialize()
      Builds the element tree for the layout.
      Overrides:
      initialize in class StyledElement<DashboardLayout>

    • header

      public DashboardLayout header(Element<?> header)
      Sets the header content.
      Parameters:
      header - the header element (title, actions, etc.)
      Returns:
      this DashboardLayout for method chaining

    • addStat

      public DashboardLayout addStat(Element<?> stat)
      Adds a stat widget to the stats bar.
      Parameters:
      stat - the stat widget element
      Returns:
      this DashboardLayout for method chaining

    • stats

      public DashboardLayout stats(Element<?>... stats)
      Sets multiple stat widgets at once.
      Parameters:
      stats - the stat widget elements
      Returns:
      this DashboardLayout for method chaining

    • addWidget

      public DashboardLayout addWidget(Element<?> widget)
      Adds a widget to the widget grid.
      Parameters:
      widget - the widget element
      Returns:
      this DashboardLayout for method chaining

    • setWidgetColumns

      public DashboardLayout setWidgetColumns(int columns)
      Sets the number of columns in the widget grid.
      Parameters:
      columns - the number of columns
      Returns:
      this DashboardLayout for method chaining

    • setWidgetGap

      public DashboardLayout setWidgetGap(int gap)
      Sets the gap between widgets.
      Parameters:
      gap - the gap in pixels
      Returns:
      this DashboardLayout for method chaining

    • setWidgetGap

      public DashboardLayout setWidgetGap(String gap)
      Sets the gap between widgets.
      Parameters:
      gap - the gap value (e.g., "24px", "1.5rem")
      Returns:
      this DashboardLayout for method chaining

    • setStatsGap

      public DashboardLayout setStatsGap(int gap)
      Sets the gap between stat cards.
      Parameters:
      gap - the gap in pixels
      Returns:
      this DashboardLayout for method chaining

    • setStatsGap

      public DashboardLayout setStatsGap(String gap)
      Sets the gap between stat cards.
      Parameters:
      gap - the gap value (e.g., "16px", "1rem")
      Returns:
      this DashboardLayout for method chaining

    • setContentPadding

      public DashboardLayout setContentPadding(int padding)
      Sets padding for the content area.
      Parameters:
      padding - the padding in pixels
      Returns:
      this DashboardLayout for method chaining

    • setContentPadding

      public DashboardLayout setContentPadding(String padding)
      Sets padding for the content area.
      Parameters:
      padding - the padding value (e.g., "24px", "1.5rem")
      Returns:
      this DashboardLayout for method chaining

    • setSectionSpacing

      public DashboardLayout setSectionSpacing(int spacing)
      Sets the spacing between stats bar and widget area.
      Parameters:
      spacing - the spacing in pixels
      Returns:
      this DashboardLayout for method chaining

    • setSectionSpacing

      public DashboardLayout setSectionSpacing(String spacing)
      Sets the spacing between stats bar and widget area.
      Parameters:
      spacing - the spacing value (e.g., "24px", "2rem")
      Returns:
      this DashboardLayout for method chaining

    • setHeaderBackground

      public DashboardLayout setHeaderBackground(String color)
      Sets the header background color.
      Parameters:
      color - the background color
      Returns:
      this DashboardLayout for method chaining

    • getHeaderPane

      public Div getHeaderPane()
      Returns the header pane for advanced customization.
      Returns:
      the header pane

    • getStatsBar

      public Div getStatsBar()
      Returns the stats bar for advanced customization.
      Returns:
      the stats bar div

    • getWidgetArea

      public Div getWidgetArea()
      Returns the widget area for advanced customization.
      Returns:
      the widget area div

    • getScrollContainer

      public Div getScrollContainer()
      Returns the scroll container for advanced customization.
      Returns:
      the scroll container div

    • twoColumnGrid

      public DashboardLayout twoColumnGrid()
      Configures a two-column widget grid.
      Returns:
      this DashboardLayout for method chaining

    • threeColumnGrid

      public DashboardLayout threeColumnGrid()
      Configures a three-column widget grid (the default).
      Returns:
      this DashboardLayout for method chaining

    • fourColumnGrid

      public DashboardLayout fourColumnGrid()
      Configures a four-column widget grid.
      Returns:
      this DashboardLayout for method chaining

    • singleColumn

      public DashboardLayout singleColumn()
      Configures a single-column widget layout.
      Returns:
      this DashboardLayout for method chaining

    • compactSpacing

      public DashboardLayout compactSpacing()
      Applies compact spacing (smaller gaps between elements).
      Returns:
      this DashboardLayout for method chaining

    • spaciousSpacing

      public DashboardLayout spaciousSpacing()
      Applies spacious spacing (larger gaps between elements).
      Returns:
      this DashboardLayout for method chaining

    • compactDashboard

      public DashboardLayout compactDashboard()
      Configures a compact dashboard with 2 columns and tight spacing.
      Returns:
      this DashboardLayout for method chaining

    • standardDashboard

      public DashboardLayout standardDashboard()
      Configures a standard dashboard with 3 columns and normal spacing.
      Returns:
      this DashboardLayout for method chaining

    • wideDashboard

      public DashboardLayout wideDashboard()
      Configures a wide dashboard with 4 columns.
      Returns:
      this DashboardLayout for method chaining

    • widgets

      public DashboardLayout widgets(Element<?>... widgets)
      Adds multiple widgets at once.
      Parameters:
      widgets - the widget elements to add
      Returns:
      this DashboardLayout for method chaining