Analytic Suite

The Analytic Suite widget enables users to display the distinct data analysis views available within the Analyze functionality of Qrvey Composer.
This includes Summaries, Tables, and Metric Views.

Quick Embeddable Sample (For Testing Only)

The following sample demonstrates how to quickly embed the Analytic Suite widget 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 can require additional properties, as described below.

<!-- Tag -->
<an-dashboard config="anSuiteConfig"></an-dashboard>

<!-- Config -->
<script>
var anSuiteConfig = {
  apiKey: "<YOUR_PRIVATE_API_KEY>", // Testing only. Do not expose in production.
  domain: "<DOMAIN>",
  appId: "<APP_ID>",
  userId: "<USER_ID>",
  qrveyId: "<DATASET_ID>"            // Represents the dataset ID
};
</script>

<!-- Launcher -->
<script type="module" src="https://<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.esm.js"></script>
<script nomodule src="https://<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 using the token, not hard-coded.
• clientId, orgId, and orgs are not required for rendering the widget but can be provided when you want Analytic Suite to act as a gateway for other components (such as Download Manager, Export Data modal, Subscriptions, or personalization).
• Configure additional properties such as settings, themeId, i18n, and customTokens 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. Caution: 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 asset you want to embed.
userId	String	Required	Yes	ID of the Qrvey user that owns the application being embedded.
qrveyId	String	Required	No	Represents the dataset ID used by the Analytic Suite.
clientId	String	Optional	Yes	Unique identifier for the tenant end user. Enables personalization and Download Manager features. Not required for rendering.
orgId	String	Optional	Yes	Not required for rendering. 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.
timezone	Object	Optional	Yes	Overrides the time zone setting in Qrvey Admin Center. For more information, see Configuring Time Zone Settings.
customTokens	Object	Optional	No	Object. Add custom tooltips onto metric panels. For more information, see Custom Tokens. Example: { "my_header": "A Cool Tooltip Header!" }
authenticatedSession.email	String	Optional	Only	Specifies the email address used for sending scheduled exports. If not set, exports are sent to the email associated with the userId.
settings	Object	Optional	No	General configuration object for controlling certain behaviors. For more information, see The Settings Object below.
userFilters	Object	Optional	Yes	Collection of custom filters applied to the Analytic Suite views. For more information, see User Filters.
themeId	String	Optional	No	Theme ID to apply a pre-defined theme. For more information, see Access a Theme Programmatically.

Orgs

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

Property	Type	Description
orgId	String	ID of the organization to which the roles and users are assigned. To list the roles and users in the subscribe modeal., this value should correspond to the user in the session orgId.
users	Array	An object/array of users to be listed in the subscribe modal. This does not include 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, see Internationalization, Step by Step.

Property	Type	Required	Value
lang	String	Yes	Language to use for the UI (examples: "es", "es-ES").
locale	String	No	Locale code to use for date and number formatting (for example, "es-ES").
currencyFormatOverride	String	No	Accepts currency codes and sets the currency (for example, "EUR") on visualizations and their exports. It overrides the default currency format in the application. Supports the list of ISO 4217 currency codes.

Note: Currency set directly on a column in a chart using the Values Format option supersedes the currency setting in currencyFormatOverride.

Example Configuration

var config = {  
  "domain": "<DOMAIN>",  
  "qvToken: "<QVTOKEN>",      
  "i18n": {
    "lang": "en",
    "locale":"EN",
    "currencyFormatOverride":"EUR"
  }
}

Note: The i18n object is supported only in the widget configuration object. It cannot be passed in a JSON web token (JWT).

Settings

Property	Type	Required
view	String, Determines the initial view to display. Accepts: SUMMARY_VIEW/MULTI_PANEL TABULAR_VIEW CUSTOM_VIEW METRIC_VIEW Default: MULTI_PANEL (which is an alias for SUMMARY_VIEW)	Optional
mode	String, Determines displaying the complete layout or the views only. It depends on set view. Accepts: COMPLETE SIMPLE Default: COMPLETE	Optional
displayMode	String, Changes the style and extends the layout onto the entire container. FULL NORMAL Default: NORMAL	Optional
styles	Object, Styles options object. These properties will extend from the current theme.	Optional
styles.chartsTitle	String, Sets the charts' title.	Optional
styles.chartsFontFamily	String, Sets the chart's font family.	Optional
styles.axisDataLabels	String, Sets axis labels color in charts.	Optional
styles.dataLabels	String, Sets a hex color for data labels in charts.	Optional
styles.valuesMain	String, Sets a hex color for axis ticks values in charts.	Optional
styles.chartsLegends	String, Sets a hex color for charts legends labels.	Optional
styles.chartsTooltips	String, Sets a hex color for charts tooltips.	Optional
styles.tableHeaderFont	String, Sets a hex color for table header texts.	Optional
styles.chartsMain	String, Sets a hex color for chart data points like bars, symbols and lines.	Optional
styles.themePalette	Array, Sets up to 20 hex colors that will be used for chart data points.	Optional

Timezone

Property	Type	Required
timezone.offset	String. Specifies the timezone offset. Accepted formats: +03:00, -03, and so on	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, see Styles documentation.