✨Quick start

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

Step 1: install databrain package

npm install @databrainhq/plugin

Step 2: import in top level of your application e.g. main/index/app

import '@databrainhq/plugin/web';

Step 3: Then use it anywhere in your app.

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

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

Step 4: Customization.

<dbn-dashboard
  token="token"
  dashboard-id="dashboardId"
  options={{
      disableMetricCreation: false, // optional - false by default
      disableMetricUpdationtion: false, // optional - false by default
      disableMetricDeletion: false, // optional - false by default
      disableLayoutCustomization: false, // optional - false by default
      chartColors: ["red", "blue", "orange", "..."], // array of color strings - by default recharts default colors
      hideDashboardName: true  // optional - false by default
  }}
  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: If you are getting Property 'dbn-dashboard' does not exist on type 'JSX.IntrinsicElements'. or Property 'dbn-metric' does not exist on type 'JSX.IntrinsicElements'.

Create a dbn.d.ts file in your src folder or in your global types.d.ts file add these following lines.

```typescript
declare namespace JSX {
  interface IntrinsicElements {
    "dbn-dashboard": any;
    "dbn-metric": any;
  }
}
```

For more information please refer to this issue https://github.com/microsoft/TypeScript/issues/48310