DataPreviewRenderers Documentation

Overview

The DataPreviewRenderers component of the Vantage platform provides a suite of tools for visually rendering data previews. This component is essential for displaying various data types—such as strings, numbers, booleans, URLs, HTML strings, and complex objects—effectively and intuitively. It features several nested components that allow users to interact with and inspect data in detail, catering to both technical and non-technical users.

Settings

The DataPreviewRenderers component comprises several settings that enhance its functionality and adaptability. Below are the exhaustive details of each setting:

1. SmartCell Component

• Name: value
  • Input Type: Any type
  • Description: The actual value to be rendered by SmartCell. Depending on its type, the display will change. For instance, booleans display as colored badges, URLs as clickable links, and objects or arrays as buttons that lead to detailed views.
  • Default Value: N/A (value must be provided).

2. JsonTreeView Component

• Name: data

  • Input Type: Object or Array
  • Description: The data to be rendered as a collapsible JSON tree. It can represent structured data, showing nested information clearly.
  • Default Value: N/A (data must be provided).

• Name: level

  • Input Type: Numeric
  • Description: This denotes the level of nesting in the JSON structure, allowing for accurate indentation and display of nested objects.
  • Default Value: 0

• Name: defaultExpanded

  • Input Type: Boolean
  • Description: When true, the tree will be expanded by default, allowing users to view nested data right away. When false, the tree remains collapsed until manually expanded.
  • Default Value: false

3. RowDetailDrawer Component

• Name: row

  • Input Type: Object
  • Description: Represents a single data row to be inspected in detail. This object will be transformed into key-value pairs for display.
  • Default Value: N/A (row must be provided).

• Name: columns

  • Input Type: Array of strings
  • Description: An array of column names to display in the detail view. If not specified, the keys from the row object will be used instead.
  • Default Value: N/A (can be omitted; defaults to keys of row).

• Name: rowIndex

  • Input Type: Numeric
  • Description: The index of the current row in its context, used for display in the header section of the drawer.
  • Default Value: N/A (value must be provided).

• Name: onClose

  • Input Type: Function
  • Description: A callback function that will be triggered to close the detail drawer.
  • Default Value: N/A (value must be provided).

4. DetailValue Component

• Name: value
  • Input Type: Any type
  • Description: The value to be displayed, which can include null, booleans, numbers, JSON objects, strings, etc. The rendering will adapt based on the type.
  • Default Value: N/A (value must be provided).

5. RawJsonView Component

• Name: data
  • Input Type: Object
  • Description: The JSON object to be displayed in a formatted view. It expects the data to be serializable. If it cannot be serialized, a default message will be displayed.
  • Default Value: N/A (data must be provided).

How It Works

1. Rendering Logic: Each nested component determines how to render data based on its type. For example, SmartCell checks for common data types, including booleans, numbers, arrays, objects, ISO dates, URLs, emails, and HTML strings. It utilizes utility functions to validate and differentiate these types for appropriate display.

2. Interactivity: Components like SmartCell and its derivatives (like JsonTreeView and RowDetailDrawer) are designed with interactive features. Users can expand/collapse details and click to open URLs or expandable data views, facilitating seamless exploration of data.

3. Styling and Accessibility: The components incorporate CSS styling for responsive design and accessibility features, ensuring that users can clearly see and interact with the visual elements.

Use Cases & Examples

Use Cases

1. Data Inspection: Analysts or data scientists can utilize the component to deeply inspect datasets during data cleansing or validation processes. The ability to visualize nested objects or arrays directly in the context of each data row is crucial for this task.

2. User Interface Development: Front-end developers can integrate these renderers into applications requiring dynamic data presentation, such as dashboards or data management tools, allowing end-users to interact with the data efficiently.

3. Data Review Meetings: In business environments, stakeholders can leverage the component to present data visually in meetings, enhancing communication and understanding of insights derived from the data.

Detailed Example

Scenario: You are working as a data analyst and need to present quarterly sales data, which includes varied data types, to your management team.

Configuration Example:

<RowDetailDrawer
    row={{
        id: 1,
        productName: "UltraWidget",
        saleDate: "2023-10-15T14:30:00Z",
        salesAmount: 1500,
        isConfirmed: true,
        feedback: null,
        customer: {
            email: "customer@example.com",
            purchaseHistory: [
                { product: "WidgetA", purchasedOn: "2023-09-15" },
                { product: "WidgetB", purchasedOn: "2023-09-20" }
            ]
        }
    }}
    columns={["id", "productName", "saleDate", "salesAmount", "isConfirmed", "feedback", "customer"]}
    rowIndex={0}
    onClose={() => console.log("Drawer closed")}
/>

In this configuration:

• The row object contains diverse data types ranging from strings to nested objects.
• The columns array specifies which fields to display, allowing flexibility in presentation.
• The rowIndex assists in tracking the row in context, and onClose attaches functionality to close the drawer.

This would render an interactive view where management can see the sales details and access customer's purchase history seamlessly.