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 below. Accepted array items format: { label: '<popup_item>', // Required action: <customCallbackFunction()> // Optional customdrills: < } Usage example: [ { label: 'SEEDATA' }, { label: 'FILTERBY' }, { label: 'DRILLDOWN' }, { label: 'CUSTOMDRILL' } ] | 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 |
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 |