The extra options/parameters that you can pass for your Web Component.
<dbn-dashboard
token="guest-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
no-data-found-svg="image svg path" // pass the svg code in form of string to display when no data in dashboard
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'}| 'this month', // date range or label of date preset option
datePresetOptions: [
{
type: 'this', // last|this|custom
interval: 1, // number
timeGrain: 'month', // 'day|week|month|quarter|year', // one of the five option for range "custom" not required
label: 'this month', // option name will appear on dropdown
startDate: new Date(), // for custom
endDate: new Date(), // for custom
},
]
},
})
}
options={JSON.stringify({
disableDownloadDataNoFilters: true, // optional - false by default
disableDownloadUnderlyingDataNoFilters: true, optional - false by default
isShowNoDataFoundScreen: true, // optional - false by default
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
disableManageMetrics: false, // optional - false by default, to enable/disable manage metrics
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',
},
},
})}
manageMetricsBtnContent={() => { return <div>content</div> }} // pass a function that contains the content that you want to show for manage metrics button
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";
datePickerFormat: 'format';
};
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";
chartFontFamily: 'roboto';
chartFontColor: 'red';
chartLetterSpacing: '12px';
tooltip: {
header: {
fontFamily: 'roboto',
fontSize: '12px',
fontWeight: 'bold',
fontColor: 'red',
},
label: {
fontFamily: 'roboto',
fontSize: '12px',
fontWeight: 'bold',
fontColor: 'red',
},
value: {
fontFamily: 'roboto',
fontSize: '12px',
fontWeight: 'bold',
fontColor: 'red',
},
};
}; // optional
cardCustomization: {
padding: "20px"; // optional
borderRadius: "10px"; // optional
shadow: "0px 10px 10px 0px rgba(13, 13, 13, 0.05)"; // optional
disableShadowOnHover: true | false;
disableStroke: true | false;
metricStrokeColor: 'blue';
};
})}
theme-name="Name of the theme you want to apply from app settings ui theming"
chart-columns ={JSON.stringify([{
isEnabled: true,
metricId: 'comparison_filter89',
dimensions: ['name'],
measures: ['count of order_id'],
}])}
hide-dashboard-filters={JSON.stringify(['workspace'])}
theme={JSON.stringify({
button: {
primaryText: 'white',
primary: 'red',
secondaryText: 'black',
secondary: 'white',
},
checkbox: {
checked: 'orange',
unChecked: 'blue',
},
switch: {
enabled: 'orange',
disabled: 'blue',
},
drillBreadCrumbs?: {
fontFamily?: 'clash grotesk';
fontColor?: 'black';
activeColor?: 'red';
},
multiSelectFilterDropdown?: {
badgeColor?: 'blue';
badgeTextColor?: 'black';
},
})}
translation-dictionary = {JSON.stringify({
'total sales': {
en: 'total sales',
fr: 'ventes totales',
es: 'ventas totales',
de: 'Gesamtumsatz',
it: 'vendite totali',
pt: 'vendas totais',
zh: '总销售额',
ja: '総売上',
ko: '총 매출',
hi: 'कुल बिक्री',
ar: 'إجمالي المبيعات',
ru: 'общие продажи',
},
})}
language= "fr"
calendar-type='ind' | 'default'
/>
### Metric Component
```html
<dbn-metric
token={guest-token}
metric-id={metricId}
width={500}
height={300}
style={style}
class-name={className}
disable-download-data-no-filters // in full screen view defaults to false
disable-download-underlying-data-no-filters
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": "top",
"radialChartposition": "outside"
},
"chartMargin": {
"marginTop": 15,
"marginLeft": 15,
"marginRight": 15,
"marginBottom": 15
},
"chartLegend": {
"show": true,
"fixedPosition": "top-right",
"enableVariablePosition": true,
"top": 15,
"left": 15,
"disableLegendScrolling": false,
"legendAppearance": "horizontal",
"truncateLegend": 22,
"legendShape": "circle",
"fontSize": 14,
"fontWeight": 400,
"fontFamily": "Inter",
"color": "#000000"
},
"verticalAxis": {
"hideAxisLines": false,
"hideSplitLines": false,
"hideAxisLabels": false,
"axisName": "axisName",
"axisNameOffset": 20,
"fontSize": 14,
"fontFamily": "Inter",
"fontWeight": 400,
"color": "#000000"
},
"horizontalAxis": {
"hideAxisLines": false,
"hideSplitLines": false,
"hideAxisLabels": false,
"axisName": "axisName",
"axisNameOffset": 20,
"fontSize": 14,
"fontFamily": "Inter",
"fontWeight": 400,
"color": "#000000"
}
})},
appearanceOptions: {JSON.stringify(
"appearanceOptionsPosition": "top-right",
"dynamicBehaviour": {
"isEnabled": true,
"label": "Dynamic"
},
"cumulativeBar": {
"isEnabled": true,
"label": "Cumulative"
},
"stackedBars": {
"isEnabled": true,
"label": "Stacked"
}
)},
long-description-config={JSON.stringify({
"width": "100%",
"fontColor": "#333"
})}
chart-columns ={JSON.stringify({
"isEnabled": true,
"dimensions": ["name"],
"measures": ["count of order_id"]
})},
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" }
],
"defaultOption": "James Smith"
},
"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",
"time": "Year",
"name": "Last 10 Years",
"count": 10, // required for range = "Last" else ignored
"fromDate": "2023-01-01", // optional if you don't want date picker for custom range else ignored
"toDate": "2023-12-31", // optional if you don't want date picker for custom range else ignored
"minDate": "2020-01-01", // optional for custom range else ignored
"maxDate": "2024-12-31" // optional for custom range else ignored
},
{
"range": "This",
"time": "Year",
"name": "This Year",
"count": 0, // required for range "Last" else not required
"minDate": "2024-01-01", // optional for custom range
"maxDate": "2024-12-31" // optional for custom range
},
],
"defaultOption": "Last 10 Years" // name of the option
},
})}
translation-dictionary = {JSON.stringify({
"total sales": {
"en": "total sales",
"fr": "ventes totales",
"es": "ventas totales",
"de": "Gesamtumsatz",
"it": "vendite totali",
"pt": "vendas totais",
"zh": "总销售额",
"ja": "総売上",
"ko": "총 매출",
"hi": "कुल बिक्री",
"ar": "إجمالي المبيعات",
"ru": "общие продажи"
}
})}
language= "fr"
calendar-type='ind' | 'default'
is-disable-card-title // hides metric card title
/>