â Options
The extra options/parameters that you can pass for your Web Component.
<dbn-dashboard
token="token"
dashboard-id="dashboardId"
is-hide-table-preview // in full screen view defaults to false
is-hide-chart-settings // in full screen view defaults to false
enable-download-csv // in metric card more icon actions defaults to false
enable-email-csv // in metric card more icon actions defaults to false
disable-download-png // in full screen mode, the save as png option in download section will be disabled
options-icon="kebab-menu-vertical | download" // one of the options defaults to kebab-menu-vertical
enable-multi-metric-filters // in metric card allow multiple metric filters
custom-messages={JSON.stringify({
tokenExpiry: "Some custom message you want to show here.",
tokenAbsent: "Some custom message you want to show here."
})} // optional all keys as well
no-data-img="image svg path" // pass the svg code in form of string to display when no data is there
handle-server-event="functionName" // define function in global object and add the name here
global-filter-options={
JSON.stringify({ // note that invalid options will be filtered out
"Filter name for a string datatype": {
options: [
{ value: 'James Smith', label: 'James' },
{ value: 'Olivia Johnson', label: 'Olivia' },
{ value: 'Emma Brown', label: 'Emma' },
] // should have unique elements
defaultOption: 'James Smith'||['James Smith', 'Emaa Brown'], // value of the selected option based on filter variant(select or multi select)
},
"Filter name for a number datatype": {
defaultOption: {min: 100, max: 900}, // number range
},
"Filter name for a date datatype": {
defaultOption: {startDate: '2024-01-01', endDate: '2024-12-31'}, // date range
},
})
}
options={JSON.stringify({
disableMetricCreation: false, // optional - false by default
disableMetricUpdationtion: false, // optional - false by default
disableMetricCardBorder: false, // optional - false by default
disableMetricDeletion: false, // optional - false by default
disableLayoutCustomization: false, // optional - false by default
disableSaveLayout: false, // optional - false by default
disableScheduleEmailReports: false, // optional - false by default
disableMainLoader: false, // optional - false by default
disableMetricLoader: false, // optional - false by default
hideDashboardName: false, // optional - false by default
hideMetricCardShadow: false, // optional - false by default
showDashboardActions: true, // optional - true by default, shows actions like create metric, customize layout etc.
disableUnderlyingData: false // optional - false by default
shouldFitFullScreen: false // optional - false by default, if enabled the full screen modal takes up the space equivalent to dbn-dashboard component
hideDatePickerOptions: ['this month', 'yesterday', '...'], // array of string which includes the label names for the date picker options that you want to hide
chartColors: ["red", "blue", "orange", "..."], // array of color strings - by default recharts default colors
chartAppearance:{
chartTooltip?: {
labelStyle?: {
size: 14,
family: 'Inter',
weight: 400,
color: '#000000';
},
valueStyle?: {
size: 14,
family: 'Inter',
weight: 400,
color: '#000000';
},
},
chartLabel: {
position: 'hidden' | 'top' | 'left' | 'right' | 'bottom' | 'inside',
radialChartposition: 'outside' | 'inside',
},
chartMargin: {
marginTop: 15,
marginLeft: 15,
marginRight: 15,
marginBottom: 15,
},
chartLegend: {
show: true | false,
fixedPosition: 'top-left'
| 'top-center'
| 'top-right'
| 'left-center'
| 'right-center'
| 'bottom-left'
| 'bottom-center'
| 'bottom-right',
enableVariablePosition: true | false,
top: 15,
left: 15,
disableLegendScrolling: true | false,
legendAppearance: 'horizontal' | 'vertical',
truncateLegend: 22,
legendShape:
| 'circle'
| 'rect'
| 'roundRect'
| 'triangle'
| 'diamond'
| 'arrow'
| 'none',
fontSize: 14,
fontWeight: 400,
fontFamily: 'Inter',
color: '#000000',
},
verticalAxis: {
hideAxisLines: true | false,
hideSplitLines: true | false,
hideAxisLabels: true | false,
axisName: 'axisName',
axisNameOffset: 20,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: 400,
color: '#000000',
},
horizontalAxis: {
hideAxisLines: true | false,
hideSplitLines: true | false,
hideAxisLabels: true | false,
axisName: 'axisName',
axisNameOffset: 20,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: 400,
color: '#000000',
},
},
})}
long-description-config={JSON.stringify({
width?: string;
fontColor?: string;
})}
disable-fullscreen // optional - false by default, will hide the full screen option
admin-theme-options={JSON.stringfy({
general: {
name: "themeName";
fontFamily: "font family like sans, roboto etc";
};
dashboard: {
backgroundColor: "red"; // optional
ctaColor: "blue"; // optional
ctaTextColor: "blue"; // optional
selectBoxSize: 'small' | 'medium' | 'large'; //optional
selectBoxVariant: 'floating' | 'static'; // optional
selectBoxBorderRadius: "20px"; // optional
selectBoxTextColor: "red"; // optional
};
cardDescription: {
fontSize: "10px"; // optional
fontWeight: "400"; // optional
color: "red"; // optional
};
cardTitle: {
fontSize: "20px"; // optional
fontWeight: "400"; // optional
color: "red"; // optional
};
chart: {
palettes: {
name: "pallete name";
colors: ['red', 'blue', 'green'.....];
}[];
selected: "selected pallete name";
}; // optional
cardCustomization: {
padding: "20px"; // optional
borderRadius: "10px"; // optional
shadow: "0px 10px 10px 0px rgba(13, 13, 13, 0.05)"; // optional
};
})}
theme-name="Name of the theme you want to apply from app settings ui theming"
theme={JSON.stringify({
button: {
primaryText: 'white',
primary: 'red',
secondaryText: 'black',
secondary: 'white',
},
checkbox: {
checked: 'orange',
unChecked: 'blue',
},
switch: {
enabled: 'orange',
disabled: 'blue',
},
})}
/><dbn-metric
token={token}
metric-id={metricId}
width={500}
height={300}
style={style}
class-name={className}
is-hide-table-preview // in full screen view defaults to false
is-hide-chart-settings // in full screen view defaults to false
enable-download-csv // in metric card more icon actions defaults to false
enable-email-csv // in metric card more icon actions defaults to false
disable-download-png // in full screen mode, the save as png option in download section will be disabled
options-icon="kebab-menu-vertical | download" // one of the options defaults to kebab-menu-vertical
enable-multi-metric-filters // in metric card allow multiple metric filters
custom-messages={JSON.stringify({
tokenExpiry: "Some custom message you want to show here."
tokenAbsent: "Some custom message you want to show here."
})} // optional all keys as well
hide-metric-card-shadow={false} // optional - false by default
no-data-img="image svg path" // pass the svg code in form of string to display when no data is there
variant: 'card' | 'fullscreen' // optional, by default it is card
on-minimize="functionName" // define function in global object and add the name here
chart-renderer-type: 'svg' | 'canvas' // optional render type
metric-filter-position: 'outside' | 'inside' // optional, specify the position for the metric filters
disable-fullscreen // option to disable the full screen button
disable-underlying-data={false} // optional - false by default
disable-metric-card-border // optional - false by default
isMergedCard // optional - false by default, it is used when you want to show merged metrics together
hide-date-picker-options: ['this month', 'yesterday', '...'] // array of string which includes the label names for the date picker options that you want to hide
chart-appearance: {JSON.stringify({
chartTooltip?: {
labelStyle?: {
size: 14,
family: 'Inter',
weight: 400,
color: '#000000';
},
valueStyle?: {
size: 14,
family: 'Inter',
weight: 400,
color: '#000000';
},
},
chartLabel: {
position: 'hidden' | 'top' | 'left' | 'right' | 'bottom' | 'inside',
radialChartposition: 'outside' | 'inside',
},
chartMargin: {
marginTop: 15,
marginLeft: 15,
marginRight: 15,
marginBottom: 15,
},
chartLegend: {
show: true | false,
fixedPosition: 'top-left'
| 'top-center'
| 'top-right'
| 'left-center'
| 'right-center'
| 'bottom-left'
| 'bottom-center'
| 'bottom-right',
enableVariablePosition: true | false,
top: 15,
left: 15,
disableLegendScrolling: true | false,
legendAppearance: 'horizontal' | 'vertical',
truncateLegend: 22,
legendShape:
| 'circle'
| 'rect'
| 'roundRect'
| 'triangle'
| 'diamond'
| 'arrow'
| 'none',
fontSize: 14,
fontWeight: 400,
fontFamily: 'Inter',
color: '#000000',
},
verticalAxis: {
hideAxisLines: true | false,
hideSplitLines: true | false,
hideAxisLabels: true | false,
axisName: 'axisName',
axisNameOffset: 20,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: 400,
color: '#000000',
},
horizontalAxis: {
hideAxisLines: true | false,
hideSplitLines: true | false,
hideAxisLabels: true | false,
axisName: 'axisName',
axisNameOffset: 20,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: 400,
color: '#000000',
},
})},
appearanceOptions: {JSON.stringify(
appearanceOptionsPosition:
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right'; // defines position for the appearance settings
dynamicBehaviour: {
isEnabled: boolean; // enables dynamic behavior
label: string; // name for the option in metric component
};
cumulativeBar: {
isEnabled: boolean; // enables cumulative behavior
label: string; // name for the option in metric component
};
stackedBars: {
isEnabled: boolean; // enables stacked behavior for bar charts
label: string; // name for the option in metric component
};
})} // optional appearance settings
long-description-config={JSON.stringify({
width?: string;
fontColor?: string;
})}
theme-name="Name of the theme you want to apply from app settings ui theming"
chart-colors={JSON.stringify(["red", "blue", "orange", "..."])} // array of color strings - by default recharts default colors
metric-filter-options={JSON.stringify({ // note that invalid options will be filtered out
"Filter name for a string datatype": {
options: [
{ value: 'James Smith', label: 'James' },
{ value: 'Olivia Johnson', label: 'Olivia' },
{ value: 'Emma Brown', label: 'Emma' },
] // should have unique elements
defaultOption: 'James Smith', // value of the selected option
},
"Filter name for a number datatype": {
options: [{ value: 1, label: 'user_1' }, { value: 2, label: 'user_2' }], // should have unique elements
defaultOption: 1, // value of the selected option
},
"Filter name for a date datatype": {
options: [
{
range: 'Last|This|Custom', // one of the three option
time: 'Day|Week|Month|Quarter|Year', // one of the five option ignored for range = "Custom"
name: 'Last 10 Years', // will be shown in the list
count: 10, // required for range = "Last" else ignored
fromDate: new Date(), // optional if you don't want date picker for custom range else ignored
toDate: new Date(), // optional if you don't want date picker for custom range else ignored
minDate: new Date(), // optional for custom range else ignored
maxDate: new Date(), // optional for custom range else ignored
},
{
range: 'Last|This|Custom', // one of the three option
time: 'Day|Week|Month|Quarter|Year', // one of the five option for range "Custom" nit required
name: 'This Year', // will be shown in the list
count: 0, // required for range "Last" else not required
minDate: new Date(), // optional for custom range
maxDate: new Date(), // optional for custom range
},
],
defaultOption: 'Last 10 Years', // name of the option
},
})}
/>Note: For the metric-filter-options prop invalid options will be filtered out.
Note: For more information about handle-server-event, check out Server Event
FAQs
Q. How to pass props dynamically or re render the embedded component on prop change?
Ans. As a web component, it does not automatically re-render upon prop changes. A common approach to address this is to force a re-render by displaying a loader and temporarily hiding the web component during prop updates. Instead of directly changing the props, you can set a temporary state to display the loader or hide the metric, then update the prop after a brief delay.
Last updated