chore: global graph components (#1014)

* chore: global bar graph component

* chore: global pie graph component

* chore: global line graph component

* chore: removed unnecessary file

* chore: refactored global chart components to accept all props

* chore: global calendar graph component added

* chore: global scatter plot graph component

apps/app/components/ui/graphs/bar-graph.tsx

@@ -0,0 +1,35 @@
+// nivo
+import { ResponsiveBar, BarSvgProps } from "@nivo/bar";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+type Props = {
+  indexBy: string;
+  keys: string[];
+};
+
+export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height" | "width">> = ({
+  indexBy,
+  keys,
+  padding = 0.3,
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsiveBar
+      indexBy={indexBy}
+      keys={keys}
+      margin={margin ?? DEFAULT_MARGIN}
+      padding={padding}
+      labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
+      theme={theme ?? CHARTS_THEME}
+      animate={true}
+      {...rest}
+    />
+  </div>
+);

apps/app/components/ui/graphs/calendar-graph.tsx

@@ -0,0 +1,34 @@
+// nivo
+import { ResponsiveCalendar, CalendarSvgProps } from "@nivo/calendar";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" | "width">> = ({
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsiveCalendar
+      margin={margin ?? DEFAULT_MARGIN}
+      colors={
+        rest.colors ?? [
+          "rgba(var(--color-accent), 0.2)",
+          "rgba(var(--color-accent), 0.4)",
+          "rgba(var(--color-accent), 0.8)",
+          "rgba(var(--color-accent), 1)",
+        ]
+      }
+      emptyColor={rest.emptyColor ?? "rgb(var(--color-bg-surface-2))"}
+      dayBorderColor={rest.dayBorderColor ?? "transparent"}
+      daySpacing={rest.daySpacing ?? 5}
+      monthBorderColor={rest.monthBorderColor ?? "rgb(var(--color-bg-base))"}
+      theme={theme ?? CHARTS_THEME}
+      {...rest}
+    />
+  </div>
+);

apps/app/components/ui/graphs/index.ts

@@ -0,0 +1,5 @@
+export * from "./bar-graph";
+export * from "./calendar-graph";
+export * from "./line-graph";
+export * from "./pie-graph";
+export * from "./scatter-plot-graph";

apps/app/components/ui/graphs/line-graph.tsx

@@ -0,0 +1,23 @@
+// nivo
+import { ResponsiveLine, LineSvgProps } from "@nivo/line";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const LineGraph: React.FC<TGraph & LineSvgProps> = ({
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsiveLine
+      margin={margin ?? DEFAULT_MARGIN}
+      theme={theme ?? CHARTS_THEME}
+      animate={true}
+      {...rest}
+    />
+  </div>
+);

apps/app/components/ui/graphs/pie-graph.tsx

@@ -0,0 +1,23 @@
+// nivo
+import { PieSvgProps, ResponsivePie } from "@nivo/pie";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const PieGraph: React.FC<TGraph & Omit<PieSvgProps<any>, "height" | "width">> = ({
+  height = "400px",
+  width = "100%",
+  margin,
+  theme,
+  ...rest
+}) => (
+  <div style={{ height, width }}>
+    <ResponsivePie
+      margin={margin ?? DEFAULT_MARGIN}
+      theme={theme ?? CHARTS_THEME}
+      animate={true}
+      {...rest}
+    />
+  </div>
+);

apps/app/components/ui/graphs/scatter-plot-graph.tsx

@@ -0,0 +1,19 @@
+// nivo
+import { ResponsiveScatterPlot, ScatterPlotSvgProps } from "@nivo/scatterplot";
+// types
+import { TGraph } from "./types";
+// constants
+import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
+
+export const ScatterPlotGraph: React.FC<
+  TGraph & Omit<ScatterPlotSvgProps<any>, "height" | "width">
+> = ({ height = "400px", width = "100%", margin, theme, ...rest }) => (
+  <div style={{ height, width }}>
+    <ResponsiveScatterPlot
+      margin={margin ?? DEFAULT_MARGIN}
+      animate={true}
+      theme={theme ?? CHARTS_THEME}
+      {...rest}
+    />
+  </div>
+);

apps/app/components/ui/graphs/types.d.ts

@@ -0,0 +1,8 @@
+import { Theme, Margin } from "@nivo/core";
+
+export type TGraph = {
+  height?: string;
+  width?: string;
+  margin?: Partial<Margin>;
+  theme?: Theme;
+};

apps/app/components/ui/index.ts

@@ -1,4 +1,5 @@
 export * from "./buttons";
+export * from "./graphs";
 export * from "./input";
 export * from "./text-area";
 export * from "./avatar";

apps/app/constants/graph.ts

@@ -0,0 +1,33 @@
+import { Theme } from "@nivo/core";
+
+export const CHARTS_THEME: Theme = {
+  background: "rgb(var(--color-bg-base))",
+  textColor: "rgb(var(--color-text-base))",
+  axis: {
+    domain: {
+      line: {
+        stroke: "rgb(var(--color-text-base))",
+        strokeWidth: 0.5,
+      },
+    },
+  },
+  tooltip: {
+    container: {
+      background: "rgb(var(--color-bg-surface-2))",
+      color: "rgb(var(--color-text-secondary))",
+      fontSize: "0.8rem",
+    },
+  },
+  grid: {
+    line: {
+      stroke: "rgb(var(--color-border))",
+    },
+  },
+};
+
+export const DEFAULT_MARGIN = {
+  top: 50,
+  right: 50,
+  bottom: 50,
+  left: 50,
+};

apps/app/package.json

@@ -14,6 +14,13 @@
     "@headlessui/react": "^1.7.3",
     "@heroicons/react": "^2.0.12",
     "@jitsu/nextjs": "^3.1.5",
+    "@nivo/bar": "0.80.0",
+    "@nivo/calendar": "0.80.0",
+    "@nivo/core": "0.80.0",
+    "@nivo/legends": "0.80.0",
+    "@nivo/line": "0.80.0",
+    "@nivo/pie": "0.80.0",
+    "@nivo/scatterplot": "0.80.0",
     "@remirror/core": "^2.0.11",
     "@remirror/extension-react-tables": "^2.2.11",
     "@remirror/pm": "^2.0.3",