✨Quick start

This will explain you how to use the databrain plugin and customization.

Note: This doc is deprecated for versions greater than v0.11.15

Step 1: install databrain package

npm install @databrainhq/plugin

Step 2: import component

import '@databrainhq/plugin/dist/style.css';
import {Metric} from '@databrainhq/plugin';

Step 3: Include the component:

<Metric token={token} metricId={metricId} />

Step 4: Customizing the UI (Optional).

<Metric
  token={token}
  metricId={metricId}
  onMinimize={() => setFullScreen(false)} // optional callback when minimize button in fullscreen mode is clicked.
  variant="card" // optional either card or fullscreen defaults to card.
  width={500}
  height={300}
  style={style}
  className={className}
  chartColors={["red", "blue", "orange", "..."]} // array of color strings - by default recharts default colors
  theme={{
      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: ""
      }
   }}
/>