The generated component code also includes configurations for event handlers and a donut chart.
<!--
Module: Demo module
Group: Group 1
Instance: Data visualization 1
-->
<sn-embedx-visualization-donut
sort-by="value"
data-labels-type="value"
data-sources='[{"allowRealTime":true,"dataCategories":["trend","group","simple"],"filterQuery":"active=true^sys_updated_onONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()","id":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","isDatabaseView":false,"label":"Case","preferredVisualizations":["d24d53f60350de7a652caf3188a46ed2"],"reportSourceSysId":null,"sourceType":"table","tableOrViewName":"sn_customerservice_case"}]'
metrics='[{"aggregateFunction":"COUNT","axisId":"primary","dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","id":"ZEdGaWJHVnpibDlqZFhOMGIyMWxjbk5sY25acFkyVmZZMkZ6WlRFM01qVTBNall4T0Rjek9EYz0xNzI1NDI2MTg4NjYx","numberFormat":{"customFormat":false}}]'
group-by='[{"disableRanges":false,"groupBy":[{"dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","groupByField":"state","isChoice":true,"isPaBucket":false,"isRange":false}],"hideZeroValues":true,"maxNumberOfGroups":"ALL","numberOfGroupsBasedOn":"NO_OF_GROUP_BASED_ON_PER_METRIC","showOthers":false}]'
additional-group-by-config='[{"id":"state","label":"State"},{"id":"account","label":"Account"}]'
truncation-type="end"
show-register
register-position="bottom"
register-orientation="horizontal"
legend-horizontal-alignment="center"
ranges-config='null'
color-config='null'
show-header
header-color='null'
title-color='null'
sort-by-order="desc"
empty-state-illustration="no-data"
empty-state-heading="No data available."
empty-state-heading-level="3"
empty-state-content="There are no scores available for the selected criteria. Contact your admin for more info."
empty-state-alignment="vertical-centered"
number-of-periods="3"
period="M"
user-info='"@context.session.user"'
shared-context='null'
colors='{}'>
</sn-embedx-visualization-donut>
<!--
The component also includes the following additional properties:
show-border
drilldown-label
show-data-labels
max-label-size
show-register-on-same-line
show-register-value
legend-max-item-width
legend-expand-to-fit
show-register-percentage
wrap-title
show-header-separator
header-title
description
refresh-request
show-additional-group-by-selector
show-metric-label
show-total-value
enable-click-and-stay
show-data-table
enable-custom-empty-state
apply-date-range
show-absolute-period
score-type
start-time
end-time
use-current-date-for-end
show-extended-error-messages
auto-aggregate-periods
-->
<script type="module">
import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
const snEmbedxVisualizationDonut = document.querySelector('sn-embedx-visualization-donut');
getEmbeddables(["sn-embedx-visualization-donut"]);
const eventHandlers = {
'NOW_VIS_WRAPPER#PROPERTY_OVERRIDE' : (e) => {
// Dispatched when the visualization overrides its property. For example when the user selects a different group by from the alternative group by selection
var {properties} = e.detail.payload;
console.log(properties);
},
'NOW_VIS_WRAPPER#SELECTED' : (e) => {
// Dispatched when the user selects/de-selects element on data visualizations, typically to filter other content on the page
var {title, type, isSelected, params, data} = e.detail.payload;
console.log(title, type, isSelected, params, data);
},
'NOW_VIS_WRAPPER#CLICKED' : (e) => {
// Dispatched when the visualization is clicked
var {title, type, params, data} = e.detail.payload;
console.log(title, type, params, data);
}
};
setEvents(snEmbedxVisualizationDonut, eventHandlers);
</script>