Added reusable line chart.

src/components/charts/LineChart.tsx

@@ -0,0 +1,64 @@
+import { JSX } from "react";
+import { Chart, useChart } from "@chakra-ui/charts";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { LineChartArr } from "@/types/LineChartStats";
+
+interface LineChartComponentProps {
+  label: "Triggers" | "Links Deleted" | "Commands";
+  data: LineChartArr;
+}
+
+const LineChartComponent = ({
+  data,
+  label
+}: LineChartComponentProps): JSX.Element => {
+  const chart = useChart({
+    data: [...data],
+    series: [{ name: label, color: "blue.700" }]
+  });
+
+  return (
+    <Chart.Root maxH="xs" chart={chart} maxW="100%">
+      <LineChart data={chart.data}>
+        <CartesianGrid stroke={chart.color("border")} vertical={false} />
+        <XAxis
+          // axisLine={false}
+          dataKey={chart.key("day")}
+          stroke={chart.color("border")}
+          label={{ value: "Day", position: "bottom" }}
+        />
+        <YAxis
+          // axisLine={false}
+          tickLine={false}
+          tickMargin={10}
+          stroke={chart.color("border")}
+          label={{ value: label, position: "left", angle: -90 }}
+        />
+        <Tooltip
+          animationDuration={100}
+          cursor={false}
+          content={<Chart.Tooltip />}
+        />
+        {chart.series.map((item) => (
+          <Line
+            key={item.name}
+            isAnimationActive={false}
+            dataKey={chart.key(item.name)}
+            stroke={chart.color(item.color)}
+            strokeWidth={2}
+            dot={false}
+          />
+        ))}
+      </LineChart>
+    </Chart.Root>
+  );
+};
+
+export default LineChartComponent;