✅Options

The extra options/parameters that you can pass for your Web Component.

Databrain Demo - StackBlitzStackBlitz

<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
  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({
      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";
      };
      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"
  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',
    },
  })}
  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'
/>

<dbn-metric
  token={guest-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;
  })}
  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' },
              ] // 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
  },
})}
 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'
/>

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.