SpacerTile

Overview

The SpacerTile is a component used within the Vantage analytics and data platform to create intentional gaps in dashboard layouts. This invisible tile helps in achieving better visual separation between other components, enhancing the overall user experience. In edit mode, it displays a dashed border for visibility and selection, while it remains transparent and non-interactive in view mode.

Settings

The SpacerTile component accepts several settings, although the current implementation does not include configurable properties. Below are the aspects related to the component's configuration and behavior:

1. config

• Input Type: Object
• Description: The config prop is an object that can hold various configuration settings for the component. In the current implementation, it does not have specified properties that affect the tile. Its purpose is primarily to allow for future enhancements where custom settings might be introduced.
• Default Value: {} (an empty object)

2. isEditing

• Input Type: Boolean
• Description: This setting controls the display mode of the SpacerTile. When true, the tile is presented in an editable state with visual indicators (dashed border and label) to signify that the tile can be manipulated. When set to false, it renders as a transparent and non-interactive component.
• Default Value: false

How it Works

When the SpacerTile component is rendered, it conditionally applies different CSS classes based on the isEditing prop.

• In Edit Mode (isEditing = true):

  • The tile shows a dashed border, indicating that it can be moved or removed.
  • A label is displayed at the center saying "Spacer", providing context to the user.

• In View Mode (isEditing = false):

  • The tile is invisible to the user and does not interfere with mouse events, making it completely transparent in the layout.

The component also includes minimum size constraints. The minimum width (minW) and minimum height (minH) are both set to 1, which ensures that the tile can at least occupy a single unit of size in both dimensions.

Data Expectations

The SpacerTile does not expect any specific data inputs from external sources, as its primary function is to serve as a layout spacer. It does rely on the isEditing state to determine its visibility attributes.

Use Cases & Examples

Use Cases

1. Dashboard Customization:

   • Users may want to customize their dashboards by introducing gaps between various analytical tiles (graphs, charts, etc.) to avoid clutter and improve aesthetics.

2. Mobile Responsiveness:

   • In mobile layouts, additional spacing may be required to ensure that components do not appear too close together, leading to a better touch-friendly interface.

3. Guiding Visual Hierarchy:

   • The SpacerTile can be used to visually define sections within a dashboard, guiding users' attention to relevant data segments without overwhelming visual noise.

Example Configuration

Use Case: Dashboard Customization with Intentional Gaps

Scenario: A data analyst wishes to introduce spacing in a financial dashboard to separate quarterly performance indicators and annual summary charts for clearer visibility.

Configuration:

const dashboardConfig = {
    tiles: [
        { type: 'GraphTile', data: quarterlyPerformanceData },
        { type: 'SpacerTile', config: {}, isEditing: true },
        { type: 'GraphTile', data: annualSummaryData },
    ]
};

In this configuration:

• A GraphTile for quarterly performance is added.
• A SpacerTile is introduced to create a visual gap.
• Another GraphTile for the annual summary follows, now visually separated for enhanced clarity.

In edit mode, the SpacerTile would be visible, allowing the user to adjust or remove it, while ensuring that the data tiles remain distinct and easy to interpret.