Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Result Summary

The lens-result-summary component displays a compact summary of result metrics defined in the Lens options. It is typically used to show overall values, such as the total number of patients found across all data sources or how many sources responded successfully.


Example

To use it, define the configuration in the Lens options and include the component in your HTML:

"resultSummaryOptions": {
    "title": "Results",
    "infoButtonText": "This is a tooltip",
    "dataTypes": [
        {
            "title": "Patients",
            "dataKey": "patients"
        }
    ]
}


Usage

The component doesn't use any props and is only set via the options

<lens-result-summary></lens-result-summary>

CSS Parts

This component uses ::part() selectors to expose internal styles for customization.

Part NameDescription
lens-result-summaryGrid wrapper for the entire result summary layout.
lens-result-summary-headerContainer for the title and optional info button.
lens-result-summary-headingAlignment wrapper for the heading text.
lens-result-summary-header-titleFlex layout for the header text and info button.
lens-result-summary-contentFlex container for the individual population summaries.
lens-result-summary-content-typeHolds each population title and its respective count.

Styling Example

[part~="lens-result-summary-header"] {
    background: #126154;
}