SectionHeaderTile Documentation

Overview

The SectionHeaderTile is a UI component used to display large text as a section header on a dashboard in the Vantage analytics platform. This component helps visually group and label sections of tiles, enhancing the overall readability and organization of the dashboard.

Purpose

The primary purpose of the SectionHeaderTile is to provide a clear and attractive way to delineate sections within a dashboard. It helps users quickly understand the layout and context of various data tiles that follow or are associated with the header.

How It Works

The component accepts various configuration parameters that customize its text and style attributes. Upon rendering, it dynamically applies these settings to display the title, optional subtitle, and description with user-defined styles such as alignment, size, background color, and divider styles.

Expected Data

Config Object

The SectionHeaderTile expects a configuration object (config) that may contain the following properties:

• title: The main title of the section.
• subtitle: An optional subtitle providing additional context.
• description: An optional description enhancing understanding of the section.
• alignment: Text alignment setting (left, center, right).
• size: Size of the title text (medium, large, xlarge).
• showDivider: Boolean indicating if a divider is displayed.
• dividerStyle: Style of the divider (line, dots, none).
• backgroundColor: Background color of the tile.
• borderRadius: Rounded corners of the tile (0, md, lg, full).

Settings

Title

1. Name: title
2. Input Type: String
3. Description: Represents the main heading of the section. By default, if not provided, it uses 'Section Header'.
4. Default Value: 'Section Header'

Subtitle

1. Name: subtitle
2. Input Type: String
3. Description: An optional subtitle displayed under the title that provides extra context. Visible only if set.
4. Default Value: ''

Description

1. Name: description
2. Input Type: String
3. Description: An optional description that gives further detail about the section. Visible only if set.
4. Default Value: ''

Alignment

1. Name: alignment
2. Input Type: String (dropdown)
3. Description: Controls the alignment of the title text. Possible values include 'left', 'center', 'right'. This affects the visual placement of text within the tile.
4. Default Value: 'left'

Size

1. Name: size
2. Input Type: String (dropdown)
3. Description: Defines the size of the title text. Options include 'medium' (text-xl), 'large' (text-2xl), and 'xlarge' (text-3xl). This impacts the emphasis placed on the title relative to other text within the tile.
4. Default Value: 'large'

Show Divider

1. Name: showDivider
2. Input Type: Boolean
3. Description: Determines whether a divider is shown below the section header. If true, a style-defined divider will be rendered.
4. Default Value: true

Divider Style

1. Name: dividerStyle
2. Input Type: String (dropdown)
3. Description: Selects the style of the divider. Options include 'line', 'dots', and 'none'. This affects how visual separation is rendered beneath the header.
4. Default Value: 'line'

Background Color

1. Name: backgroundColor
2. Input Type: String (hex code)
3. Description: Sets the background color of the tile. This impacts the tile's appearance and the contrast of the text color against the background.
4. Default Value: ''

Border Radius

1. Name: borderRadius
2. Input Type: String (dropdown)
3. Description: Controls the roundness of the tile's corners. Available options are '0' (no rounding), 'md', 'lg', and 'full' (fully rounded). This provides a stylized look to the tile.
4. Default Value: Undefined (uses a default behavior of rounded corners if not specified)

Use Cases & Examples

Use Cases

1. Dashboard Organization: For a business intelligence dashboard, using the SectionHeaderTile can help segment different data categories (e.g., sales data, customer feedback) to improve navigation and comprehension.

2. Presentation Layer: A financial report visualization dashboard can utilize the SectionHeaderTile to colorfully showcase different reports (e.g., quarterly earnings, expense reports) with stylized headers.

3. User Customization: In a multi-user analytics platform, users can personalize their dashboards with custom section headers to highlight areas of interest (e.g., 'Marketing Insights', 'Recent Achievements').

Example Configuration

For a Sales Dashboard that needs to distinctly label a section focusing on "Quarterly Sales Performance":

const salesHeaderConfig = {
  title: "Quarterly Sales Performance",
  subtitle: "Review of Q3 Sales Data",
  description: "Overview of quarterly performance metrics and insights.",
  alignment: "center",
  size: "xlarge",
  showDivider: true,
  dividerStyle: "line",
  backgroundColor: "#f0f8ff",
  borderRadius: "lg"
};

// Usage of the SectionHeaderTile
<SectionHeaderTile config={salesHeaderConfig} />

In this example, the SectionHeaderTile is configured to highlight the "Quarterly Sales Performance" with a large centered title and fine aesthetics through a light background and rounded corners. The subtitle and description provide additional insights, and a line divider enhances the area's visual separation from subsequent tiles.