Analytic Suite Widget
This widget allows the user to display the distinct views available on the analyze side (i.e Summary, Custom, Metric views), through a configuration object where properties are set to define some options and behaviors.
To obtain the specific configuration object for your environment, go to the Analyze tab for the desired dataset and click the Embed Analyze View icon in the top-right corner of any analysis view.
This will open a dialog with the necessary code, including the “domain”, “app_id” and “user_id” property values. You can copy the code from here and include it in your application. You have to provide the unique API key value. The building blocks of the code are explained below:
HTML Tag And Launcher
The HTML tag for this widget is:
<an-dashboard config=...>
Note: The configuration property for this widget is called “config”, unlike most other widgets where the same property is called “settings”.
This widget needs an extra script for proper support in all browsers.
<script type="module" src=”https://<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.esm.js”></script> (For all browsers support)
<script nomodule src=”https://<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.js”></script> (Widget launcher)
Configuration Object
The table below provides general information about each property of this widget’s configuration object, along with a description of the expected value. The Required column indicates whether the property is required for the configuration object to work properly.
| Property | Value | Required |
|---|---|---|
| api_key | String, secret identification token to access the application. | Yes |
| app_id | String, ID of the qrvey application containing the webform. | Yes |
| user_id | String, ID of the user that edits the widget. | Yes |
| domain | String, domain URL in which the application is in. | Yes |
| qrveyid | String, ID of the dataset being used. | Yes |
| settings | Object, general configuration in order to set some behaviors. | No |
| settings.view | String, determines the initial view to display and it accepts: SUMMARY_VIEW/MULTI_PANEL TABULAR_VIEW CUSTOM_VIEW METRIC_VIEW Default: MULTI_PANEL (alias for SUMMARY_VIEW) | No |
| settings.mode | String, determines displaying the complete layout or the views only. It depends on set view and it accepts: COMPLETE SIMPLE * Default: COMPLETE | No |
| settings.displayMode | String, changes the style and extends the layout onto the entire container. FULL NORMAL * Default: NORMAL | No |
| userFilters | Object, the filters object generated by the user. This will be applied in internal components to filter the data. I.e. AN Single Panel. {filters: <Filters Key Structure>} | No |
| themeid | String, theme ID to use in the component | No |
| settings.styles | Object, styles options object. These properties will extend from the current theme | No |
| settings.styles.chartsTitle | String, set the charts title color | No |
| settings.styles.chartsFontFamily | String, set the charts font family | No |
| settings.styles.axisDataLabels | String, set axis labels color in charts | No |
| settings.styles.dataLabels | String, color for data labels in charts | No |
| settings.styles.valuesMain | String, set color for axis ticks values in charts | No |
| settings.styles.chartsLegends | String, color for charts legends labels | No |
| settings.styles.chartsTooltips | String, color for charts tooltips | No |
| settings.styles.tableHeaderFont | String, set color for table header texts | No |
| settings.styles.chartsMain | String, set color for chart data points like bars, symbols and lines. | No |
| settings.styles.themePalette | Array, contains a maximum of 20 colors that will be used for chart data points. | No |
| custom_tokens | Object, contains a set of custom tokens, each of them in turn, receives an array of with the list of tokens.{<custom token 1>: [<token 1>: “token 1”, <token 2>: “token 2”]} | No |
Note: Refer to the FAQs if you don’t know where to find any of the required configuration properties.
Samples
The following samples show the way this widget is used in an HTML page. Please note that the example may not include the non-required properties of the configuration object.
You can copy and paste this code to your application after replacing the red values with your own valid values in order to see the embedded widget in action.
Basic Sample:
<an-dashboard config="configDashBoard"></an-dashboard>
<script>
var configDashBoard = {
"api_key": "<API_KEY>",
"app_id": "<APP_ID>",
"domain": "https://your_qrvey_domain",
"user_id": "<USER_ID>",
"qrveyid": "<QRVEY_ID>",
"settings": {
"view": "CUSTOM_VIEW"
}
}
</script>
<!-- your launcher js link (replace with your js link) -->
<script type="module" src="https://<WIDGETS_URL>/your_qrvey_an_widgets_container/an-dashboard/andashboard/andashboard.esm.js"></script>
<script nomodule src="https://<WIDGETS_URL>/your_qrvey_an_widgets_container/an-dashboard/andashboard/andashboard.js"></script>
Sample With the Filter Object Generated by a User:
`
<script>
var configDashBoard = {
"api_key": "<API_KEY>",
"app_id": "<APP_ID>",
"domain": "https://your_qrvey_domain",
"user_id": "<USER_ID>",
"qrveyid": "<QRVEY_ID>",
"userFilters": {
"filters": [{
"operator": "AND",
"expressions": [
{
"qrveyid": "<QRVEY_ID>",
"enabled": true,
"questionid": "<QUESTION_ID>",
"validationType": "<VALIDATION_TYPE>",
"value": [
"<VALUE_TO_FILTER_1>",
"<VALUE_TO_FILTER_2>"
]
}
]
}]
}
}
</script>
<script>
function applyNewFilter() {
window.dispatchEvent(new CustomEvent('anApplyUserFilters', {
detail: {
"filters": [{
"operator": "AND",
"expressions": [
{
"qrveyid": "<QRVEY_ID>"
"enabled": true,
"questionid": "<QUESTION_ID>",
"validationType": "<VALIDATION_TYPE>",
"value": [
"<VALUE_TO_FILTER_3>"
]
}
]
}]
}
}));
}
</script>
<!-- your launcher js link (replace with your js link) -->
<script type="module" src="https://<WIDGETS_URL>/your_qrvey_an_widgets_container/an-dashboard/andashboard/andashboard.esm.js"></script>
<script nomodule src="https://<WIDGETS_URL>/your_qrvey_an_widgets_container/an-dashboard/andashboard/andashboard.js"></script>