(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Pivot

...

grid

The Dynamic Pivot  Pivot Grid Component is an advanced data visualization and analysis tool that organizes complex datasets into a cross-tabular format. It component that allows users to summarize, analyze, and compare large volumes of data across multiple dimensions. The component provides powerful capabilities for data transformation, including grouping, filtering, sorting, and calculation of summary values. Pivot grids are particularly useful for business intelligence, financial analysis, and data exploration scenarios.

Properties

Visual Properties

analyze multi-dimensional data by grouping, filtering, and summarizing information. It provides interactive capabilities for data exploration, enabling users to pivot data across different dimensions and view aggregated metrics in a customizable grid format.

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Sales Analysis Grid" allows for easy identification of the component's purpose within the UI builder interface.

• id - Specifies a unique identifier for the component used for programmatic access. For example, "salesByRegionPivotGrid" enables targeted manipulation of this specific pivot grid through actions or events.

Visual Properties

Image Added

• titleTranslations titleTranslations - Sets the title text displayed above the pivot grid, with support for multiple languages. For example, {"en-US": "Sales Performance Analysisby Region", "de-DE": "Analyse der Verkaufsleistung"} allows proper localization of the component titleVerkauf nach Region"} provides localized titles for different user languages.

• subtitleTranslations - Sets a secondary text displayed below the title, with language support. For example, {"en-US": "Quarterly breakdown by region and productAnnual Analysis", "defr-DEFR": "Quartalsaufschlüsselung nach Region und ProduktAnalyse Annuelle"} provides  provides additional context about the data being presenteddisplayed.

• allowFiltering - Enables filtering capabilities for pivot grid fields. When enabled, users can apply filters to reduce the dataset to specific values of interest, enhancing data analysis capabilities.

• showBorders - Determines whether borders are displayed around the pivot grid cells. When enabled, grid cells are visually separated with border lines, making the data structure more clearly defined.

• allowFiltering - Enables the ability to filter data within showBorders - Determines whether borders are displayed around cells in the pivot grid. When enabled, cell borders improve the readability of complex datasets by providing clear visual separationusers can apply filters to narrow down the displayed data based on specific criteria, such as showing only data for specific regions.

• allowSorting - Enables sorting capabilities for functionality within the pivot grid dimensions. When enabled, users can sort data within any in ascending or descending order by clicking on column or row to identify trends, highest/lowest values, or other patterns in the dataheaders.

• showColumnGrandTotals - Determines whether  - Controls the visibility of grand totals are shown for columns. When enabled, a displays summary row calculating totals across all columns is displayed at the bottom of the gridend of each column group, providing aggregated values across all rows.

• showRowGrandTotals - Determines whether  - Controls the visibility of grand totals are shown for rows. When enabled, a displays summary column calculating totals across all rows is displayed at the right edge of the gridend of each row group, providing aggregated values across all columns.

• showRowTotals - Controls the display visibility of subtotals for each individual row groupgroups. When enabled, subtotal rows are shown displays totals for each grouped categorygroup of row values, providing intermediate summary informationsummaries within the data hierarchy.

• showColumnTotals - Controls the display visibility of subtotals for each individual column groupgroups. When enabled, subtotal columns are shown displays totals for each grouped categorygroup of column values, providing intermediate summary information.summaries within the data structure.

Field Panel Properties

Image Added

• showFieldPanel - Displays a panel allowing users to customize Activates the field panel interface for the pivot grid layout. When enabled, users can displays a panel that allows users to interactively drag and drop fields between different areas (data, row, column, filter) to reconfigure the analysis dynamicallyof the pivot grid.

• showDataFields - Controls the visibility of data fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate value fieldsWhen enabled and showFieldPanel is true, displays the available data fields that can be used for calculations and aggregations.

• showRowFields - Controls the visibility of row fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate row dimension fieldsWhen enabled and showFieldPanel is true, displays fields that can be assigned to row dimensions of the pivot grid.

• showColumnFields - Controls the visibility of column fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate column dimension fieldsWhen enabled and showFieldPanel is true, displays fields that can be assigned to column dimensions of the pivot grid.

• showFilterFields - Controls the visibility of filter fields in the field panel. This property only applies when showFieldPanel is enabled and determines whether users can manipulate filter fieldsWhen enabled and showFieldPanel is true, displays fields that can be used to filter the entire pivot grid dataset.

• allowFieldDragging - Enables drag-and-drop functionality field rearrangement in the field panel. This property only applies when When enabled and showFieldPanel is enabled and allows users to reposition true, users can drag fields between different areas for on-the-fly analysis restructuring.paddingClass - Configures the padding around the component using CSS classesto reorganize the pivot grid structure.

Field Configuration

• elements - Defines the fields and their configuration for the pivot grid. This array contains DynamicPivotGridFieldComponent objects with properties like dataField, caption, area, and aggregation functions. For example, configuring a "p-3" adds medium padding on all sides of the pivot grid component.

Non-Visual Properties

• useMockData - Determines whether sample data is used instead of an actual data source. When enabled, the pivot grid displays pre-defined sample data, which is useful for design and testing purposes.

Datasource Properties

• region" field for rows, a "date" field for columns, and an "amount" field for data with sum aggregation.

Data Source Properties

Image Added

• dataSourceId dataSourceId - Specifies the data source ID for retrieving pivot grid data. For example, "api/sales-/analysis" connects the pivot grid to an endpoint that provides the appropriate data structure for pivot analysisthe sales analysis API endpoint.

• getEntityCollectionHttpRequestParametersMap - Configures HTTP request parameters for data fetching data. This allows for customizing query parameters or path variables that are sent when requesting data from the specified source.object maps additional parameters needed for the data request, such as {"year": "currentYear"} to filter data for a specific year.

• useMockData - Determines whether sample data is used elements - Defines the fields configuration for the pivot grid, including how raw data fields are mapped to pivot areas (row, column, data, filter). This configuration determines which aspects of the data are used for different dimensions of the analysis and how values are calculated and displayed.

Event Actions

• . When enabled, the component will use built-in sample data instead of fetching from an API, useful for prototyping or demonstration purposes.

Events

• events - Configures the events - Configures events that the component can trigger and respond to:
  • ON_INIT: Triggered when the pivot grid component is initialized.
  This event can
  • Can be used to perform setup operations or
  initial
  • fetch additional context data
  processing
  • .
  • ON_DESTROY: Triggered when the pivot grid component is removed from the DOM.
  This event can be used for cleanup operations or resource release.

General

• displayName - Sets the display name of the component shown in the structure panel. For example, "Sales Analysis Pivot" clearly identifies the purpose of this specific pivot grid in the component structure.

Authorization

• visibilityPolicySetId - Determines the visibility of the component based on user permissions and policy sets. For example, setting to "analyticsTeamPolicy" restricts the pivot grid to users with analytics team privileges.

Visibility

• displayConditions - Defines conditions under which the pivot grid is displayed. This allows for context-aware visibility, showing the pivot grid only when certain conditions are met (e.g., when a specific dashboard section is active).

Testing Hooks

• • Useful for cleanup operations when navigating away from a page.

Testing Hooks

• dataTestId - Sets the

• id - Specifies a unique identifier for the component, useful for programmatic access in testing or custom code.

• dataTestId - Sets a testing hook ID for automated testing, allowing test scripts to reliably identify this pivot grid component.

• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, this pivot grid can be highlighted during onboarding tours.

• guidedTourHotSpotTitle - Sets the title text displayed when this component is highlighted in a guided tour, with support for translations.

• guidedTourHotSpotDescription - Sets the descriptive text explaining the pivot grid's purpose during a guided tour, with support for translations.

Data Format Requirements

The Pivot Grid component works best with flat, tabular data in the following format:

[
  {
    "region": "North",
    "product": "Widgets",
    "quarter": "Q1",
    "year": 2023,
    "sales": 12500,
    "cost": 7500,
    "profit": 5000
  },
  {
    "region": "North",
    "product": "Gadgets",
    "quarter": "Q1",
    "year": 2023,
    "sales": 8200,
    "cost": 5100,
    "profit": 3100
  },
  // Additional records...
]

The elements property configuration determines how these fields are used in the pivot grid's structure:

• Fields like "region", "product", "quarter", and "year" can be used as row or column dimensions
• Fields like "sales", "cost", and "profit" are typically used as data fields with summary functions (sum, average, count, etc.)

Field Configuration

The elements property allows for detailed configuration of how data fields are used in the pivot grid:

[
  {
    "dataField": "region",
    "area": "row",
    "caption": "Sales Region"
  },
  {
    "dataField": "quarter",
    "area": "column",
    "caption": "Quarter"
  },
  {
    "dataField": "sales",
    "area": "data",
    "caption": "Total Sales",
    "summaryType": "sum",
    "format": "currency"
  }
]

Each field can be configured with:

• dataField: The property name in the data source
• area: Where to place the field (row, column, data, filter)
• caption: Display label for the field
• summaryType: How to aggregate values (sum, avg, min, max, count)
• format: How to display values (currency, percentage, fixed-point, etc.). For example, setting it to "sales-pivot-grid" allows test scripts to reliably locate this specific pivot grid component.