Vuejs

npm install @databrainhq/plugin

import '@databrainhq/plugin/web';

<dbn-dashboard
  token="your-guest-token"
  dashboard-id="your-dashboard-id"
  disable-fullscreen
  is-hide-chart-settings
  is-hide-table-preview
  enable-download-csv
  enable-email-csv
  enable-multi-metric-filters
  options-icon="kebab-menu-vertical"
  :custom-messages="JSON.stringify({
    'tokenExpiry': 'Some custom message you want to show here.'
  })"
  theme-name="Name of the theme you want to apply from app settings ui theming"
/>

<dbn-metric
  token="your-guest-token"
  metric-id="your-metric-id"
  chart-renderer-type="canvas"
  disable-fullscreen
  is-hide-chart-settings
  is-hide-table-preview
  enable-download-csv
  enable-email-csv
  options-icon="kebab-menu-vertical"
  enable-multi-metric-filters
  metric-filter-position="outside"
  width="500"
  height="400"
  :custom-messages="JSON.stringify({
    'tokenExpiry': 'Some custom message you want to show here.'
  })"
  :metric-filter-options="JSON.stringify({
        'Filter name for a string datatype': {
          'options': ['hello', 'hi'],
          'defaultOption': 'hello'
        },
        'Filter name for a number datatype': {
          'options': [9, 19, 23],
          'defaultOption': 19
        },
        'Filter name for a date datatype': {
          'options': [{
            'range': 'Last',
            'time': 'Day',
            'name': 'Last 10 Years',
            'count': 10,
            'fromDate': '2024-01-01',
            'toDate': '2024-01-31',
            'minDate': '2023-01-01',
            'maxDate': '2024-12-31'
          },{
            'range': 'This',
            'time': 'Year',
            'name': 'This Year',
            'count': 0,
            'minDate': '2024-01-01',
            'maxDate': '2024-12-31'
          }],
          'defaultOption': 'Last 10 Years'
        }
  })"
  theme-name="Name of the theme you want to apply from app settings ui theming"
  :appearance-options="JSON.stringify({
    'appearanceOptionsPosition': 'top-left',
      'cumulativeBar': {
        'isEnabled': true,
        'label': 'Cumulative'
      },
      'stackedBars': {
        'isEnabled': true,
        'label': '100% stacked bars'
      },
      'dynamicBehaviour': {
        'isEnabled': true,
        'label': 'Dynamic'
      }
  })"
></dbn-metric>