Skip to main content

ListRegistry

The ListRegistry contains components designed for displaying data in list or summary formats. These components are commonly used in dashboard views, analysis results, and data presentation.

Available Components​

Highlight (SpotlightNumber)​

Displays key metrics and numerical values with titles and units.

Registry Key: "Highlight"
Component: SpotlightNumber

interface SpotlightNumberProps {
  titles: string[];     // Array of titles for each metric
  values: number[];     // Array of numerical values
  units?: string[];     // Optional array of units for each value
}

Example Configuration:

{
  "name": "Highlight",
  "properties": {
    "titles": ["Energy Consumption", "Efficiency Rating"],
    "values": [2500, 85],
    "units": ["kWh", "%"]
  }
}

DataList​

Displays structured data in a list format.

Registry Key: "DataList" or "Data List"
Component: DataList

Text (SummaryTextLayout)​

Displays text content in a formatted layout.

Registry Key: "Text"
Component: SummaryTextLayout

Usage in Layouts​

The ListRegistry components are automatically available when using the RenderContext.Generate or RenderContext.Compare contexts:

import { ComponentRegistry, RenderContext } from '~/components/layout/types';

// Get the appropriate registry based on context
const registry = ComponentRegistry[RenderContext.Generate];

// Access a list component
const SpotlightComponent = registry["Highlight"];

Integration with Layout System​

These components integrate seamlessly with the InForm layout system:

  1. Layout Definition: Define the component in your layout JSON
  2. Data Binding: Connect analysis results or user input data
  3. Rendering: The layout system automatically renders the appropriate component

Styling and Theming​

All ListRegistry components follow the application's design system:

  • Use Material-UI components for consistency
  • Support theme customization through the theme provider
  • Responsive design for different screen sizes
  • Accessibility features built-in

Best Practices​

  1. Data Structure: Ensure your data matches the expected interface
  2. Performance: Use appropriate loading states for large datasets
  3. Accessibility: Provide meaningful titles and descriptions
  4. Responsive Design: Test components at different screen sizes