FilterTile Documentation

Overview

The FilterTile is a reusable component designed for the Vantage analytics & data platform. Its primary purpose is to allow users to apply and visualize multiple filters for data sets. The Tile facilitates user interaction by enabling the selection of filters that define the criteria for data analysis, ultimately helping users drive insights based on specific requirements.

Settings

1. Height

• Name: height
• Input Type: Numeric
• Description: Specifies the height of the FilterTile component. This setting affects the visual space the tile occupies on the dashboard. A larger height may accommodate more filters or other contents.
• Default Value: Not specified (assumed to use default styling if not provided).

2. Width

• Name: width
• Input Type: Numeric
• Description: Defines the width of the FilterTile component. This contributes to how the filter options are displayed horizontally. A wider tile allows for more content and can improve readability.
• Default Value: Not specified (assumed to use default styling if not provided).

3. Filters

• Name: filters
• Input Type: Array of Objects
• Description: Contains a list of filter objects. Each object defines a filter available for selection. The use of this property allows dynamic configuration of the tile's visible filters.
• Default Value: An empty array ([]).
  • Filter Object:
    • Label (string): The text label to display for the filter.
    • Selected (boolean): Indicates whether the filter is currently selected.
    • Count (numeric): Represents the count of items associated with that filter, useful for indicating the size of the dataset being filtered.

4. Title

• Name: title
• Input Type: String
• Description: The main title displayed at the top of the FilterTile. This provides context to the users about what filters they can apply.
• Default Value: Not specified (assumed to be empty if not provided).

5. Subtitle

• Name: subtitle
• Input Type: String
• Description: A secondary line of text displayed below the title. This can provide additional context or instructions related to the filters.
• Default Value: Not specified (assumed to be empty if not provided).

6. Footer Text

• Name: footerText
• Input Type: String
• Description: Text displayed at the bottom of the FilterTile. This could be used for additional information or tooltips relevant to the filters.
• Default Value: Not specified (assumed to be empty if not provided).

7. Footer Color

• Name: footerColor
• Input Type: String
• Description: Specifies the color of the footer text for style customization. This enhances the visual appearance of the tile in relation to the overall dashboard theme.
• Default Value: Not specified (assumed to use default coloring if not provided).

How It Works

The FilterTile component dynamically renders a list of filters provided through the filters prop. Each filter is presented with a checkbox-like interface, where users can visually manage their selections. The selected state is indicated through styling changes, including background color and checkmark icons. The component also includes a progress bar for each filter option, indicating the associated count of items, which can help users in decision-making.

User selections and interactions with these filters are not described in the given code but can be assumed to interact with broader data querying logic in the Vantage platform, potentially enabling users to see live updates in related analytics.

Data Expectations

The filters prop must be passed as an array of objects, each containing:

• label: a string to display for the filter.
• selected: a boolean indicating if the filter is selected.
• count: a numeric value representing how many items pertain to that filter.

The FilterTile will process this array and render each filter dynamically, resulting in user-selectable options.

Use Cases & Examples

Use Cases

1. Customer Segmentation: Analyze user behavior by applying filters based on demographics, purchase history, or engagement metrics.
2. Sales Data Analysis: Allow sales managers to filter data by product type, sales region, or date ranges to extract actionable insights.
3. Marketing Campaign Performance: Filter data related to specific campaigns to evaluate performance metrics and demographics response rates.

Example Configuration

Use Case: Sales Data Analysis

To set up a FilterTile to help sales managers filter data based on product type, here’s a sample configuration:

{
    "config": {
        "height": 4,
        "width": 3,
        "filters": [
            {
                "label": "Electronics",
                "selected": false,
                "count": 150
            },
            {
                "label": "Clothing",
                "selected": true,
                "count": 75
            },
            {
                "label": "Home Goods",
                "selected": false,
                "count": 50
            }
        ]
    },
    "title": "Sales Filters",
    "subtitle": "Select the product types to refine your sales data",
    "footerText": "Click on the filters to apply",
    "footerColor": "#6B7280"
}

In this example:

• The FilterTile will display filters for three different product types.
• The "Clothing" filter is marked as selected, indicating that it is currently applied.
• A count next to each filter helps visualize the data volume associated with each category, enhancing the decision-making process.

This configuration effectively allows sales managers to easily navigate through product-related data to focus on their insights.