Skip to main content

​
@databrainhq/plugin

Databrain app ui web component plugin.

npm: @databrainhq/plugin

v0.15.135-uat

Code Style: StandardJS

Enforced using StandardJS styleguide.
 https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-vanilla

​
Usage

In your index.html file, add the following script 
<script src="https://unpkg.com/@databrainhq/plugin@latest"></script>
Note: If you want to use a specific version, add the version in place of latest. For example 
<script src="https://unpkg.com/@databrainhq/plugin@0.15.49"></script>
If you get process error in your console, add the below script above your cdn script 
<script>
  window.process = { env: {} };
</script>
Use global document object to create components. Add the below script in your script file like main.js or inside script tags.

​
Integrating Dashboard:

function initDashboard() {
  const url = new URL(location.href);
  const token = url.searchParams.get("token") || "";
  const dashboardId = url.searchParams.get("dashboardId") || "";

  // Create the dashboard element
  const dashboardElement = document.createElement('dbn-dashboard');

  // Set attributes
  if (token) {
    dashboardElement.setAttribute('token', token);
  }

  if (dashboardId) {
    dashboardElement.setAttribute('dashboard-id', dashboardId);
  }

  // Append the dashboard to the body
  document.body.appendChild(dashboardElement);
}

// Initialize the dashboard when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initDashboard);

​
Integrating Metric

function initMetric() {
  const url = new URL(location.href);
  const token = url.searchParams.get("token") || "";
  const dashboardId = url.searchParams.get("metricId") || "";

  // Create the metric element
  const metricElement = document.createElement('dbn-metric');

  // Set attributes
  if (token) {
    metricElement.setAttribute('token', token);
  }

  if (dashboardId) {
    metricElement.setAttribute('metric-id', dashboardId);
  }

  // Append the metric to the body
  document.body.appendChild(metricElement);
}

// Initialize the metric when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initMetric);
Note: If you don’t want to use cdn link, you can install the below npm package. 
npm i @databrainhq/plugin
Add import statement like below in your main.js file. 
import "@databrainhq/plugin/web";
⌘I