DashboardGrid Component Documentation

Overview

The DashboardGrid component is an interactive and responsive grid layout manager designed for the Vantage analytics and data platform. It allows users to organize, visualize, and interact with various data tiles in a customizable dashboard format. Each tile can represent different analytics visualizations, with support for dynamic data loading, tile resizing, dragging, and interaction features.

Purpose

The main purpose of the DashboardGrid is to enable users to create customizable and data-driven dashboards where they can easily rearrange visual elements and dynamically display data insights. It facilitates an interactive experience by allowing users to manipulate the layout based on their preferences and requirements.

Expected Data

The DashboardGrid component expects an array of gridTiles, where each tile should contain:

• id: Unique identifier for the tile.
• position: Specifies the tile's position and size within the grid.
• config: Configuration details for each tile, such as visualization type, workflows, drilldowns, and collapsibility.

The component also makes use of a data cache (workflowDataCache) to check for previously fetched data associated with the tiles.

Settings

General Settings

The DashboardGrid component comes with several configurable properties, outlined below:

• gridTiles:

  • Input Type: Array
  • Description: An array of tile objects that define the visual components of the dashboard.
  • Default Value: [] (an empty array implies no tiles are being displayed).

• isEditing:

  • Input Type: Boolean
  • Description: A flag indicating whether the dashboard is in editing mode.
  • Default Value: false. When true, it allows the user to rearrange tiles and invoke edit/delete actions.

• onLayoutChange:

  • Input Type: Function
  • Description: A callback function triggered when the layout changes. It allows external components to respond to layout updates (e.g. saving layout state).
  • Default Value: () => {} (a no-op function).

• workflowDataCache:

  • Input Type: Object
  • Description: A cache object that holds data from previously executed workflows, improving performance by avoiding repeated data fetching.
  • Default Value: {} (an empty object).

Layout Configurations

The layout of the grid is determined dynamically based on the screen size with the following settings:

• cols:

  • Input Type: Object
  • Description: Defines the number of columns for different screen sizes (lg, md, sm, xs). This responsive behavior ensures that the grid adapts to different devices.
  • Default Value: { lg: 6, md: 4, sm: 2, xs: 1 }.

• breakpoints:

  • Input Type: Object
  • Description: Defines the pixel widths at which the layout changes, affecting how many columns are visible on different screen sizes.
  • Default Value: { lg: 1200, md: 996, sm: 768, xs: 480 } adjusted by the editing scale.

• rowHeight:

  • Input Type: Number
  • Description: Defines the height of each row in pixels. Modifying this affects the vertical space allotted to each tile.
  • Default Value: 100.

• margin:

  • Input Type: Array
  • Description: Denotes the gutter sizes between tiles. It controls the horizontal and vertical spacing around tiles.
  • Default Value: [16, 16] scaled by editing mode if applicable.

• compactType:

  • Input Type: String
  • Description: Determines how the grid layout handles collisions and positioning. Options typically include 'vertical' or 'horizontal'.
  • Default Value: vertical.

• preventCollision:

  • Input Type: Boolean
  • Description: If enabled, prevents tiles from overlapping when dragging or resizing.
  • Default Value: false.

Dynamic Behavior Settings

The following settings pertain to user interaction with tiles:

• isDraggable:

  • Input Type: Boolean
  • Description: Indicates if tiles can be dragged around the dashboard layout during the editing mode.
  • Default Value: It follows the isEditing state.

• isResizable:

  • Input Type: Boolean
  • Description: Indicates if tiles can be resized during the editing mode.
  • Default Value: It follows the isEditing state.

How It Works

1. Initial Setup: The DashboardGrid initializes with gridTiles, allowing users to set their dashboard layout from the provided array.
2. Layout Management: It dynamically generates the layout based on current viewport size using breakpoints, ensuring responsiveness.
3. Data Caching: Using workflowDataCache, it checks for existing data before attempting to load data for each tile, which optimally loads only the required data.
4. Interactivity: It supports tile editing, dragging, collapsing, and drilldown functionalities triggered through user actions.

Use Cases & Examples

Use Cases

1. Business Performance Monitoring Dashboard:

   • A manager wants to visualize key performance indicators (KPIs) to monitor team performance on a centralized dashboard. Different tiles can represent various departments' metrics.

2. Sales Analytics Dashboard:

   • A sales team needs to track their sales data in real-time and utilize visualization tiles to analyze trends, compare current versus past sales, and drill down into specific product performance.

3. Customer Support Dashboard:

   • A support manager wishes to keep track of customer queries, ticket resolutions, and response times. The dashboard can be arranged to display metrics with drilldown capabilities to review specific categories of tickets.

Concrete Example

Use Case: Sales Analytics Dashboard

Objective: To track and visualize sales trends and perform a comparative analysis.

Sample Configuration Data:

const salesTiles = [
  {
    id: 'total-sales',
    position: { x: 0, y: 0, w: 2, h: 2 },
    config: {
      title: 'Total Sales',
      visualizationType: 'lineChart',
      workflows: [{ id: 'sales-over-time' }],
      collapsible: { enabled: true, initialState: 'closed' }
    }
  },
  {
    id: 'top-products',
    position: { x: 2, y: 0, w: 4, h: 2 },
    config: {
      title: 'Top Products',
      visualizationType: 'barChart',
      workflows: [{ id: 'top-products-workflow' }]
    }
  },
  {
    id: 'sales-comparison',
    position: { x: 0, y: 2, w: 6, h: 4 },
    config: {
      title: 'Sales Comparison',
      visualizationType: 'comparisonChart',
      workflows: [
        { id: 'current-year-sales' },
        { id: 'last-year-sales' }
      ]
    }
  }
];

In this configuration, the dashboard will consist of tiles visualizing total sales in a line chart, displaying the top products in a bar chart, and comparing sales performance between this year and last year in a more extensive chart. The collapsibility feature allows users to hide metrics to streamline their view when necessary.

Additional Considerations

• AI Integrations: There is potential for AI-powered analytics to be integrated with the tiles for predictive insights based on historical data.
• Billing Impacts: Usage of the DashboardGrid might influence billing based on the volume of data processed (tile workflows) or the features utilized, such as AI integrations or data loading rates. Ensure your usage aligns with your billing tier provisions.

This documentation provides a comprehensive overview of the DashboardGrid component, illustrating its capabilities and how it integrates within the Vantage platform.