⚛️Svelte

@databrainhq/plugin

Databrain app ui web component plugin.

Install

npm install @databrainhq/plugin

Github Repo Link

https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-svelte

Usage

Import in main/index/App

<script lang="ts">
import '@databrainhq/plugin/web';
</script>

Then use it anywhere in your app

Integrating Dashboard

<script lang="ts">
  // your component logic
</script>
<main>
  <dbn-dashboard
    token={/*YOUR GUEST TOKEN*/}
    options={/*YOUR ACCESS PERMISSION OPTIONS*/}
    theme={/*YOUR THEME*/}
    dashboard-id={/*YOUR DASHBORD ID*/}
    disable-fullscreen // to disable fullscreen view
    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
    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."
    })} // optional all keys as well
    theme-name="Name of the theme you want to apply from app settings ui theming"
  ></dbn-dashboard>
</main>

Integrating Metric

<script lang="ts">
// your component logic
</script>
<main>
  <dbn-metric
    token={/*YOUR GUEST TOKEN*/}
    chart-renderer-type="canvas"
    theme={/*YOUR THEME*/}
    dashboard-id={/*YOUR DASHBORD ID*/}
    disable-fullscreen // to disable fullscreen view
    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
    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
    metric-filter-position="outside | inside" // one of the option defaults to outside (from beta version 0.13.0-beta.8 only)
    width="500"
    height="400"
    style={/* YOUR STYLEs */}
    class-name="YOUR CLASS"
    custom-messages={JSON.stringify({
      tokenExpiry: "Some custom message you want to show here."
    })} // optional all keys as well
    metric-filter-options={JSON.stringify({ // note that invalid options will be filtered out
        "Filter name for a string datatype": {
          options: ['hello', 'hi'], // should have unique elements
          defaultOption: 'hello', // name of the option
        },
        "Filter name for a number datatype": {
          options: [9, 19, 23], // should have unique elements
          defaultOption: 19, // name of the 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
        },
    })}
    theme-name="Name of the theme you want to apply from app settings ui theming"
    appearance-options={JSON.stringify({
        appearanceOptionsPosition: 'top-left|top-right|bottom-left|bottom-right', // one of the four options, by default it is bottom-right
        cumulativeBar: {
          isEnabled: true|false, // can be used with bar and time series charts (if series type is bar)
          label: 'Cumulative' // change the label for the property
        },
        stackedBars: {
          isEnabled: true|false, // can be used with stack chart only
          label: '100% stacked bars', // change the label for the property
        },
        dynamicBehaviour: {
          isEnabled: true|false, // can be used with bar, line, area, stacked area and time series charts
          label: 'Dynamic' //change the label for the property
        },
    })}
  ></dbn-metric>
</main>