Added charts

package.json

@@ -16,6 +16,7 @@
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "recharts": "^2.1.10",
     "sass": "^1.52.3"
   },
   "scripts": {

src/components/Chart/Chart.jsx

@@ -0,0 +1,82 @@
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import "./Chart.scss";
+
+const data = [
+  {
+    name: "Jan",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: "Feb",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: "Mar",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: "Apr",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: "May",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: "Jun",
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: "July",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
+
+const Chart = ({ title = "Last 6 months (Revenue)" }) => {
+  return (
+    <div className="chart-container">
+      <div className="chart-title">{title}</div>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          width={500}
+          height={2000}
+          data={data}
+          margin={{
+            top: 10,
+            right: 30,
+            left: 0,
+            bottom: 0,
+          }}
+        >
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default Chart;

src/components/Chart/Chart.scss

@@ -0,0 +1,12 @@
+.chart-container {
+  display: flex;
+  flex-direction: column;
+  flex: 2.5;
+  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.25);
+  padding: 2%;
+
+  .chart-title {
+    margin-bottom: 2%;
+    color: gray;
+  }
+}

src/components/Chart/index.js

@@ -0,0 +1 @@
+export { default } from "./Chart";