Skip to main content
1

Install databrain package

npm install @databrainhq/plugin
2

Import in top level of your application e.g. main/index/app

import '@databrainhq/plugin/web';
3

Then use it anywhere in your app

<dbn-metric token="token" metric-id="metricId" />

<dbn-dashboard token="token" dashboard-id="dashboardId" />
4

Customization

<dbn-dashboard
  token="token"
  dashboard-id="dashboardId"
  options={{
      disableMetricCreation: false,
      disableMetricUpdationtion: false,
      disableMetricDeletion: false,
      disableLayoutCustomization: false,
      chartColors: ["red", "blue", "orange", "..."],
      hideDashboardName: true
  }}
  theme={JSON.stringify({
      colors: {
          background: "",
          primary: "",
          primaryLight: "",
          primaryDark: "",
          secondary: "",
          secondaryLight: "",
          secondaryDark: "",
          tertiary: "",
          tertiaryLight: "",
          tertiaryDark: "",
          error: "",
          errorLight: "",
          errorDark: "",
          warning: "",
          warningLight: "",
          warningDark: "",
          dark: "",
          light: "",
          gray50: "",
          gray100: "",
          gray200: "",
          gray300: "",
          gray400: "",
          gray500: "",
          gray600: "",
          gray700: "",
          gray800: "",
          gray900: "",
      },
      border: {
          radiusNone: "0",
          radiusDefault: "5px",
          radiusSm: "2px",
          radiusMd: "10px",
          radiusLg: "16px",
          radiusXl: "20px",
          radius2xl: "24px",
          radius3xl: "30px",
          radiusFull: "50%",
      },
      typography: {
          fontSize: "9px",
          fontFamily: "Inter",
          fontWeightThin: 200,
          fontWeightLight: 300,
          fontWeightRegular: 400,
          fontWeightSemibold: 500,
          fontWeightBold: 600,
          colorPrimary: "",
          colorSecondary: "",
          colorTertiary: "",
      },
      breakpoint: {
          xs: 360,
          sm: 512,
          md: 720,
          lg: 990,
          xl: 1280,
      },
      metricLayoutCols: {
          lg: 12,
          md: 10,
          sm: 6,
          xs: 4,
          xxs: 2,
      },
      shadow: {
          primary: "",
          secondary: "",
          tertiary: ""
      }
  })}
/>

<dbn-metric
token={token}
metric-id={metricId}
width={500}
height={300}
style={style}
class-name={className}
chart-colors={["red", "blue", "orange", "..."]} // array of color strings - by default recharts default colors
theme={JSON.stringify({
  colors: {
      background: "",
      primary: "",
      primaryLight: "",
      primaryDark: "",
      secondary: "",
      secondaryLight: "",
      secondaryDark: "",
      tertiary: "",
      tertiaryLight: "",
      tertiaryDark: "",
      error: "",
      errorLight: "",
      errorDark: "",
      warning: "",
      warningLight: "",
      warningDark: "",
      dark: "",
      light: "",
      gray50: "",
      gray100: "",
      gray200: "",
      gray300: "",
      gray400: "",
      gray500: "",
      gray600: "",
      gray700: "",
      gray800: "",
      gray900: "",
  },
  border: {
      radiusNone: "0",
      radiusDefault: "5px",
      radiusSm: "2px",
      radiusMd: "10px",
      radiusLg: "16px",
      radiusXl: "20px",
      radius2xl: "24px",
      radius3xl: "30px",
      radiusFull: "50%",
  },
  typography: {
      fontSize: "9px",
      fontFamily: "Inter",
      fontWeightThin: 200,
      fontWeightLight: 300,
      fontWeightRegular: 400,
      fontWeightSemibold: 500,
      fontWeightBold: 600,
      colorPrimary: "",
      colorSecondary: "",
      colorTertiary: "",
  },
  breakpoint: {
      xs: 360,
      sm: 512,
      md: 720,
      lg: 990,
      xl: 1280,
  },
  metricLayoutCols: { 
      lg: 12, 
      md: 10, 
      sm: 6, 
      xs: 4, 
      xxs: 2,
  },
  shadow: {
      primary: "",
      secondary: "",
      tertiary: ""
  }
})}
/>
Note: JSX typing errorsIf you are getting
Property 'dbn-dashboard' does not exist on type 'JSX.IntrinsicElements' or
Property 'dbn-dashboard' does not exist on type 'JSX.IntrinsicElements' you may need to extend the intrinsic JSX types to register custom elements in your project’s global typings.
Create a dbn.d.ts file in your src folder or in your global types.d.ts file add these following lines.
declare namespace JSX {
  interface IntrinsicElements {
    "dbn-dashboard": any;
    "dbn-metric": any;
  }
}
For more information, refer to this TypeScript GitHub issue.