Single Panel

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

Embeddable Script

<!-- Tag -->
<an-panel config="anPanelConfig"></an-panel>

<!-- Config -->
<script>
var config = {
  apiKey: "<YOUR_PRIVATE_API_KEY>",
  domain: "https://<YOUR_QRVEY_DOMAIN>",
  userId: "<USER_ID>",
  appId: "<APP_ID>"
};
</script>

<!-- Launcher -->
<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>```

Configuration Object

Property	Value	Required	qvToken Support
apiKey	String, Your organization’s unique API key required to access the Qrvey platform.	Required if qvToken is not provided.	---
qvToken	String, Encrypted token used for secure authentication.	Required, if apiKey is not provided.	---
orgId	String, Organization to which the end user belongs to. Enables Subscribing to Exports.	Optional	Only
orgs	JSON, List of users and roles per organization. The list of users is displayed inside the subscribe modal filtered by the current user’s organization Id, roles are not listed.	Optional	Only
email	String, Used to define a clientId email, used to enable schedule exports.	Optional	Only
appId	String, ID of the Qrvey application that contains the asset you want to embed.	Required	Yes
userId	String, ID of the Qrvey Composer user that owns the application that is being embedded. Alternatively, you can specify the user ID in a Qrvey session cookie.	Required, if the userId is not included in a session cookie.	Yes
domain	String, The base URL of your instance of the Qrvey platform.	Required	No
qrveyId	String, ID of the dataset being used.	Required	No
type	String, Defines the panel type. Choose between CHART, SUMMARY, or METRIC.	Required	No
chartId	String, ID of the chart to display.	Required if type is CHART.	No
metricId	String, ID of the metric to display.	Required if type is METRIC.	No
summaryId	String, ID of the summary panel to display.	Required if type is SUMMARY.	No
panel	Object, Allows you to configure which features are used in a panel. For details, please see The Panel Object below.	Optional	No
userFilters	Object, A filters object generated by the user. For more details, please see User Filters.	Optional	No
i18n	Object, Defines the language to be displayed in the static text of the widget as well as the dataset columns. For details, please see The i18n Object for details.	Optional	No
themeId	String, Theme ID to use in the component. For more details please see Accessing a Theme Programmatically.	Optional	No
featurePermission	Object, Enables you to create a customized view by showing and hiding specific features. For details, please see The Feature Permission Object below.	Optional	No
customTokens	Object, Enables you to add custom tooltips onto metric panels. For details, please see Custom Tokens. Example { "my_header": "The Tooltip Header :)"}	Optional	No

i18n

For more information, see Internationalization, Step by Step.

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

Orgs

The orgs property defines a list of users and roles grouped by organization. Filtered based on the current user's organization ID. This feature is only supported when using qvToken.

{
 "orgs": [
  {
    "orgId": "1",
    "users": [
      {
        "clientId": "john_smith",
        "email": "john_smith@qrvey.com"
      },
    ]
  }
]
}

Property	Description
orgRoles	Array, Not used in this widget. List of role IDs available for sharing in this organization.
users	Object Array, List of users available to subscribe with under this organization.
└ users.clientId	String, The user's clientId.
└ users.email	String, Email address of user.

Timezone

Property	Value	Required
timezone.offset	String, An attribute inside timezone that specifies the timezone offset. Accepted formats include +03:00, -03, etc.	Optional

Panel

Property	Value	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	Value	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