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 |
|---|---|---|
| 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. |
| appId | String, ID of the Qrvey application that contains the asset you want to embed. | Required |
| domain | String, The base URL of your instance of the Qrvey platform. | Required |
| 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. |
| qrveyId | String, ID of the dataset being used. | Required |
| type | String, Defines the panel type. Choose between CHART, SUMMARY, or METRIC. | Required |
| chartId | String, ID of the chart to display. | Required if type is CHART. |
| metricId | String, ID of the metric to display. | Required if type is METRIC. |
| summaryId | String, ID of the summary panel to display. | Required if type is SUMMARY. |
| panel | Object, Allows you to configure which features are used in a panel. For details, please see The Panel Object below. | Optional |
| userFilters | Object, A filters object generated by the user. For more details, please see User Filters. | Optional |
| 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 |
| themeId | String, Theme ID to use in the component. For more details please see Accessing a Theme Programmatically. | Optional |
| authenticatedSession | Object, Contains authenticatedSession.email, which is used to configure scheduled exports. For details, please see The Authenticated Session Object below. | Optional |
| 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 |
| customTokens | Object, Enables you to add custom tooltips onto metric panels. For details, please see Custom Tokens. Example { "my_header": "The Tooltip Header :)"} | Optional |
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 |
Authenticated Session
| Property | Value | Required |
|---|---|---|
| authenticatedSession.email | String, Specifies the email address to send scheduled exports. Example: "example@qrvey.com" | 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 Page Builder and End User. Accepted Values: CSV. | 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 |
panel.body.popup.items
Accepted array items format:
{
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 |