Quick start

npm install @databrainhq/plugin

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

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

<Metric
  token={token}
  metricId={metricId}
  onMinimize={() => setFullScreen(false)} // optional callback
  variant="card" // optional - card or fullscreen
  width={500}
  height={300}
  style={style}
  className={className}
  chartColors={["red", "blue", "orange", "..."]} // default is recharts 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: ""
    }
  }}
/>