Databrain Demo - StackBlitz

StackBlitz

​
Dashboard 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({
      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',
    },
  })}
  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

<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": "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
/>

​
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.