⚛️Vanilla JS

@databrainhq/plugin

Databrain app ui web component plugin.

Github Repo Link

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/[email protected]"></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) {
    dashboardElement.setAttribute('token', token);
  }
  
  if (dashboardId) {
    dashboardElement.setAttribute('metric-id', metricId);
  }

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