Single Panel

The Single Panel widget enables you to embed a chart, metric, or summary panel that has already been created in Qrvey Composer.

⚠️ Note: Unlike Dashboards, Single Panels do not include the full set of dashboard functionality such as global filters. When embedding a Single Panel, only the visualization itself is rendered.

---

⚡ Quick Embeddable Sample (For Testing Only)

The following sample demonstrates how to quickly embed a single panel in your system.
⚠️ Important: This example is for testing purposes only.

• API Key: In production, your API key must never be exposed in the UI. It should only be used in backend-to-backend communication.
• Minimal Config: The sample uses the minimum set of properties needed for quick testing. Production deployments may require additional properties, as described below.

<an-panel config="singlePanelConfig"></an-panel>

<!-- Widget's Configuration Object -->
<script>
var singlePanelConfig = {
   "apiKey": "<YOUR_PRIVATE_API_KEY>",   // Testing only. Do not expose in production.
   "appId": "<APP_ID>",
   "domain": "https://<YOUR_QRVEY_DOMAIN>",
   "userId": "<USER_ID>",
   "qrveyId": "<DATASET_ID>",            // Represents the dataset ID
   "type": "CHART",                      // Can also be "METRIC" or "SUMMARY"
   "chartId": "<CHART_ID>"               // Use metricId if type=METRIC, summaryId if type=SUMMARY
}
</script>

<!-- Widget's Launchers -->
<script type="module" src="<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.esm.js"></script>
<script nomodule src="<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.js"></script>

---

Production Deployment

When deploying to production:

• Use a qvToken instead of an apiKey.
• Ensure appId, userId, and qrveyId are passed via the token, not hard-coded.
• clientId, orgId, and orgs are not required for rendering the widget, but can be provided when you want Single Panel to act as a gateway for other components (e.g., Download Manager, Export Data modal, Subscriptions, personalization).
• Configure additional properties such as panel, featurePermission, and i18n as needed.
• Keep the API key securely stored on the server side only.

---

Configuration Object

Property	Type	Required	qvToken Support	Description
domain	String	Required	No	Qrvey instance URL. Example: https://example.qrvey.com.
qvToken	String	Required, if apiKey is not provided	---	Encrypted token used for secure authentication. Used in production to securely pass all required parameters. Cannot be used with apiKey.
apiKey	String	Required, if qvToken is not provided	No	Secret token for accessing the application. ⚠️ For testing only; do not use in production UI. Cannot be used with qvToken.
appId	String	Required	Yes	ID of the Qrvey application that contains the chart, metric, or summary panel.
userId	String	Required (if not in session cookie)	Yes	ID of the Qrvey Composer user that owns the application being embedded. Alternatively, it can be passed in a Qrvey session cookie.
qrveyId	String	Required	No	Represents the dataset ID to be used in the panel.
type	String	Required	No	Defines the panel type. Choose between CHART, SUMMARY, or METRIC.
chartId	String	Required if type is CHART	No	ID of the chart to display.
metricId	String	Required if type is METRIC	No	ID of the metric to display.
summaryId	String	Required if type is SUMMARY	No	ID of the summary panel to display.
clientId	String	Optional	Yes	Not required for rendering. Unique identifier for the tenant end user. Used for personalization and passed to other components such as Download Manager or Export modal.
orgId	String	Optional	Yes	Not required for rendering. Organization ID for the end user. Used to pass organization context to other components.
orgs	Object Array	Optional	Only	Not required for rendering. Defines users and roles grouped by organization. Used to enable sharing/subscription features in other components.
email	String	Optional, required for scheduling/subscriptions	Only	Email of the clientId user. Enables scheduling of exports/subscriptions.
panel	Object	Optional	No	Allows configuration of panel features (header, body, footer, styles, etc.). For details, please see The Panel Object below.
userFilters	Object	Optional	Yes	Collection of custom filters applied to the panel visualization. For more details, please see User Filters.
timezone	String	Optional	Yes	Timezone offset applied to dates. For more information, see Configuring Time Zone Settings.
i18n	Object	Optional	No	Defines language for UI text and dataset columns. Supports internationalization. For details, please see The i18n Object for details.
themeId	String	Optional	No	Theme ID to apply a pre-defined theme. For more details please see Accessing a Theme Programmatically.
featurePermission	Object	Optional	No	Enables you to create a customized view by showing and hiding specific features. For details, please see The Feature Permission Object below.
customTokens	Object	Optional	No	Adds personalization with custom tooltips. For details, please see Custom Tokens Example: { "my_header": "Tooltip Header" }.

Orgs

For full details on how orgs work, please see Ownership, Orgs, & Subscriptions.

Property	Type	Description
orgId	String	The ID of the organization to which the roles and users will be defined next. Should correspond to the user in session's orgId if you want the roles and users to be listed in subscribe.
users	Array	An object/array of users to be listed in the subscribe modal. This is not for the current user. Adjust clientId and email accordingly.
users.clientId	String	clientId of the user.
users.email	String	Email address of the user.

Example:

const orgs = [
  {
      orgId: 'ORG_ID',
      users: [
        {
          clientId: 'CLIENT_ID',
          email: 'EMAIL'
        },
        {
          clientId: 'CLIENT_ID2',
          email: 'EMAIL2'
        }
      ]
  }
]

i18n

For more information, please see Internationalization, Step by Step.

Property	Type	Required	Value
lang	String	Required	The language to use for the UI. Example: "es".
locale	String	Optional	The locale code to use for date and number formatting. Example: "es-ES".

Timezone

Property	Type	Required
timezone.offset	String. Specifies the timezone offset. Accepted formats: +03:00, -03, etc.	Optional

Panel

Property	Type	Required
panel.header	Object, The panel header options object.	Optional
panel.header.visible	Boolean, Determines if the panel header is visible. Defaults to true.	Optional
panel.header.draggable	Boolean, Used by Custom View and Metric View panels. If true, the panel header has an icon to drag and drop the panel. Defaults to false in embedded widgets.	Optional
panel.header.filter	Boolean, Determines if the panel header has a filter button to open the Filter Modal widget. Defaults to false in embedded widgets.	Optional
panel.header.menu	Array/Boolean, if it's an array, the panel header will show the options passed through the array. If the value is true, the panel header will show a default menu. Accepted values for the array: EDIT, DOWNLOAD, DUPLICATE, SIZE and DELETE. (Note: SIZE is used only by Custom View panels).	Optional
panel.header.fit_panel	Boolean, Set to true if "fit to panel" button is enabled. false by default.	Optional
panel.header.title_prefix	String, Sets a prefix for the title of the panel.	Optional
panel.header.externalDownload	Array, Set of values to allow external download for defined formats. Used by the Dashboard. Accepted Values: CSV.	Optional
panel.header.sorting	Boolean, Determines if sorting button is show in the panel header.	Optional
panel.header.chartSelection	Boolean, Allow the user to change the chart type.	Optional
panel.header.columnReplacement	Boolean, Allow the user to select and change the columns from the self-service option.	Optional
panel.header.columnAggregation	Boolean, Allow the user to select and change the columns aggregates directly from the self-service option.	Optional
panel.header.dateGrouping	Object, Allow the user to change date grouping, for the cases of having a Date type column, their date grouping (shown below). All of them will be accessible under the icon of 'Column settings'.	Optional
panel.body	Object, Panel body options object.	Optional
panel.body.popup	Object, Panel body popup options object. Used to show Filter By, See Data and Drill-Down options.	Optional
panel.body.popup.items	Array, Set of options to show on the popup. Description of properties are given below.	Optional
panel.body.popup.items[itemIndex]	Object, Popup item options object to use in panel.body.popup.items array.	Optional
panel.body.popup.items[itemIndex].label	String, Option name. Required for this array.	Optional
panel.body.popup.items[itemIndex].action	Function, Custom callback function.	Optional
panel.footer	Object, Panel footer options object.	Optional
panel.footer.visible	Boolean, Determines if a panel footer is visible. Defaults to false.	Optional
panel.styles	Object, Styles options object. These properties will extend the current theme.	Optional
panel.styles.chartsTitle	String, Set the charts title color using a hex value.	Optional
panel.styles.chartsFontFamily	String, Set the charts font family.	Optional
panel.styles.axisDataLabels	String, Set axis labels color in charts.	Optional
panel.styles.dataLabels	String, Sets a hex color for data labels in charts.	Optional
panel.styles.valuesMain	String, Sets a hex color for axis ticks values in charts.	Optional
panel.styles.chartsLegends	String, Sets a hex color for charts legends labels.	Optional
panel.styles.chartsTooltips	String, Set a hex color for charts tooltips.	Optional
panel.styles.tableHeaderFont	String, Sets color for table header texts.	Optional
panel.styles.chartsMain	String, Sets color for chart data points like bars, symbols and lines.	Optional
panel.styles.themePalette	Array, Sets up to 20 hex color values for char data points like bars, symbols and lines.	Optional

dateGrouping

// example
dategrouping: {
  year: true,
  quarter: true,
  month: true,
  week: true,
  quarter_only: true,
  month_only: true,
  day_only: true,
  advancedGrouping: {
    day: true,
    hour: true,
    minute: true,
    second: true,
    hour_only: true,
    minute_only: true,
    second_only: true
  }
}

panel.body.popup.items

Accepted array items format:

let item = {
  label: '<popup_item>',              // Required
  action: customCallbackFunction(),   // Optional
  customdrills: <Array>               // Optional
}

Example: [{ label: 'SEEDATA' }, { label: 'FILTERBY' }, { label: 'DRILLDOWN' }, { label: 'CUSTOMDRILL' }]

Feature Permission

Property	Type	Required
downloads	Object, Hide the Export feature, which supports exporting charts, tables, dashboards, and reports to downloadable files (PDF, JPG, CSV, EXCEL, CSV SUMMARY). For single panel, contains hideSchedule.	Optional
downloads.hideSchedule	Boolean, If true, hides the Schedule option in the Export feature. Defaults to false.	Optional
featurePermission.hideSubscription	Boolean, Hide the subscription option in the export modal.	Optional
featurePermission.hideSubscribeExternalUsers	Booolean, Disable the option of subscribing users outside of the organization.	Optional

---

Styles

The Single Panel Widget supports customization through CSS variables, allowing you to adapt the look and feel of dashboards to match your application’s design system. This includes control over fonts, colors, spacing, and other UI elements.

By overriding the available style variables, you can achieve a fully branded experience for end users without altering functionality. This is the recommended way to ensure consistency across embedded dashboards.

👉 For the complete list of available style variables and examples of how to use them, please refer to the Styles documentation.